get image file object from url

javascript read file from url
javascript create file object from url
javascript create blob from image url
url.createobjecturl react
image url to image blob
blob url to base64
readasdataurl
createobjecturl filename

I am making a django-angularjs webapp. There is a option for file uploading for the users. I want to provide users with some sample images to upload. So it will be like the sample images will be sent by server to client and again send back to the server if the client chooses them as Fresh upload.

angularjs directive:

angular.module('users').directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
    var model = $parse(attrs.fileModel);
    var modelSetter = model.assign;

    element.bind('change', function(){
        scope.$apply(function(){
            modelSetter(scope, element[0].files[0]);
        });
    });
}
};
}]);

my html:

<input type="file" file-model="myFile"/><br><br>
<button ng-click="uploadFile()">Upload</button>

angular-js controller:

$scope.uploadFile = function(){

    var file = $scope.myFile;
    var uploadUrl = "/multer";
    var fd = new FormData();
    fd.append('file', file);

    $http.post(uploadUrl,fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(){
      console.log("success!!");
    })
    .error(function(){
      console.log("error!!");
    });
};

Using the code above the user can select the image from their pc and upload them.

Now if we have the url for the sample images sent by server. How to code the angular controller to get images for their file object from those urls? like $scope.myFile=getImageFileObjectFromUrl(url) ??

thanks for help

$http.get("image_url", {responseType: "arraybuffer"}).success((data) => {
    fd.append('file', data);
});

It's a general idea, when you get your image url, just make a request as arraybuffer to the URL, then you just have to pass the blob object to your formdata.

FileReader.readAsDataURL(), The new object URL represents the specified File object or Blob object. To release an Examples. See Using object URLs to display images. When you have a File object you'd like to reference by URL from HTML, you can create an object URL for it like this: const objectURL = window.URL.createObjectURL(fileObj); The object URL is a string identifying the File object.

Convert a image from the given url into a file object:

$http.get(url,{responseType: "blob"}).success((data) => {
  var file = new File([data], "sample.jpg");
  $scope.sampleFile=file;
});

URL.createObjectURL(), A Blob can be easily used as an URL for <a> , <img> or other tags, to show its By clicking on a link you download a dynamically-generated Blob with hello world contents as a file: <! To transform a Blob into base64, we'll use the built-​in FileReader object. It can read data from Blobs in multiple formats. It's a general idea, when you get your image url, just make a request as arraybuffer to the URL, then you just have to pass the blob object to your formdata. share | improve this answer edited Mar 8 '16 at 15:48

It also may help

  $http.get(url.path, {responseType: "blob"}).then((res) => {
   let fileUrl = (window.URL || window.webkitURL).createObjectURL(res.data);
   resolve({file: fileUrl, type: url.type, name: url.name});
  });

Blob, That's how we can get a File object from <input type="file"> : readAsDataURL – when we'd like to use this data in src for img or another tag. There's an alternative to reading a file for that, as discussed in chapter Blob: URL. Javascript Create File Object From URL. In this tutorial I will show you how to retrieve a remote file and then create a blob (similar to file object). This can be useful if you want to analyze a text/binary remote file on frontend using JavaScript. This simple code converts a remote file to a blob object.

File and FileReader, This simple code converts a remote file to a blob object. var blob = null; var xhr = new XMLHttpRequest()  Creates an Image from the specified file. Creates an Image from the specified file. Creates an Image from the specified file using embedded color management information in that file. Creates an Image from the specified file. A string that contains the name of the file from which to create the Image. The Image this method creates.

Javascript Create File Object From URL, To download a file, first create a Cloud Storage reference to the file you want to an existing gs:// or https:// URL referencing an object in Cloud Storage. `url` is the download URL for 'images/stars.jpg' xhr.open('GET', url); The image file we are using in the above line is named as Taj.jpg and it is in Image folder which is inside the D: drive on a Windows PC. Next, we will create an object of BufferedImage type and pass as parameter the width, height and image int type.

Download Files on Web, jpg image file. In addition to reading from files or URLS, Image I/O can read from other sources, such as an InputStream. ImageIO.read()  The JSON Data. Here’s a sample JSON data with the image URLs. It has 3 objects, the ID, Name and Image. The value for the Image object must have a URL (or the location of the files).

Comments
  • Not working... data is always empty arraybuffer. although i can see the jpeg data when i remove the response type.
  • Which release of angular do you use ?
  • You will have to use XHR2 to make arraybuffer work, so maybe just use a raw XMLHttpRequest 2 instead of angular's $http.
  • Hi, any idea about displaying this image to HTML side?