get image file object from url - html

Question

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

Answer 1

$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.

Answer 2

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;
});

Answer 3

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});
});