Programatically add files

[eugenekgn]

Is there a way to pragmatically add files? Let's say there are some files on the server when pages load and I want to add them to be displayed.

[nervgh]

Try this

var dummy = new FileUploader.FileItem(uploader, {
    lastModifiedDate: new Date(),
    size: 1e6,
    type: 'image/jpeg',
    name: 'test_file_name'
});

dummy.progress = 100;
dummy.isUploaded = true;
dummy.isSuccess = true;

uploader.queue.push(dummy);

[DiegoA29]

Hi,

If I use a url instead of file name for the "name" property, will it work? If not, do you have any suggestions for this? (The image is stored in the server) Thanks!

[rboughani]

For what purpose you want to change the name

[DiegoA29]

I mean... does the file have to be stored locally? Or could it be an image stored on a remote location and add it through specifying an url?

[rboughani]

Maybe I misunderstood your question, but a file upload is to recover a file from a PATH (remote or on the same machine) to another PATH

The home directory can be retrieved with the angular-api file-upload and remote directory you can set it manually

i dont knew if i have answered to your question or i m out ^^

[DiegoA29]

mmmmm ok... may be I'm a bit confused. I will take a look later (I'm at work right now) and I let you know how it went. Thanks!

[opiedog]

Should this approach result in the file upload control displaying 'test_file_name'?

When I use your sample code above, I see an item has been added to the uploader.queue array, but the UI doesn't show the file name.

My goal is to pre-load the UI as it would look if the user clicked Choose File and uploaded "test_file_name".
The scenario is this:

1. User goes to the page and uploads a file and it shows "test_file_name.jpg" next to the Choose File button.
2. The user leaves the page and then returns.
3. The app shows the page in the state it was in step 2.

Thanks!

[bushev]

Hi guys!

How to obtain FileItem from remote URL?

I already tryed:

name: 'http://...
url: 'http://...

[emilhakobian]

I have the same issue , with displaying remote files (uploaded before) after page reload. I tried, but unfortunately it is not working.

var uploader.url = '/data/uploads/';
var fileItem = new FileUploader.FileItem(uploader, {
                        lastModifiedDate: new Date(),
                        type: 'image/jpeg',
                        size: 1311776,
                        name: 'logo.jpg'
                    });

                    fileItem.progress = 100;
                    fileItem.isUploaded = true;
                    fileItem.isSuccess = true;

                    uploader.queue.push(fileItem);

[mfundo]

This seemed to work for me (I'm using Angular):

Get files via $http, my JSON snippet looks like so:

"UploadedFiles": [
{
"name": "test.png",
"size": 31.5,
"dateModified": "today",
"type": "image/png"
},
{
"name": "test.png",
"size": 31.7,
"dateModified": "today",
"type": "image/png"
}
]

for(var i = 0; i < $scope.user.UploadedFiles.length; i++ ){

var fileItems = [];
 fileItems[i] = new FileUploader.FileItem($scope.uploader, $scope.user.UploadedFiles[i]);

fileItems[i].progress = 100;
fileItems[i].isUploaded = true;
fileItems[i].isSuccess = true;

$scope.uploader.queue.push(fileItems[i]);

}

Hope this helps :)

[sakram80]

But where to put actual file object ? I want to preview files which are already uploaded ? Can somebody help me with this ?

[TonyLuo]

+1 how to preview the uploaded image with url ?

[TonyLuo]

finally got it. hope this code can help someone

var url = 'api/containers/comK/download/IMG_20130731_211048.jpg';
$http.get(url,{responseType: "blob"}).
success(function(data, status, headers, config) {
var mimetype = data.type;
var file = new File([data], "IMG_20130731_211048.jpg",{type:mimetype});
var dummy = new FileUploader.FileItem(imageUploader, {});
dummy._file = file;
dummy.progress = 100;
dummy.isUploaded = true;
dummy.isSuccess = true;
imageUploader.queue.push(dummy);
}).
error(function(data, status, headers, config) {
alert("The url could not be loaded...\n (network error? non-valid url? server offline? etc?)");
});

[sakram80]

Hi TonyLuo,
It works for me as well thanks.

[ghost]

great plugin mate but when I add the dummy there is no event for added File. this screws up a litle my programming, I need a list of all the added files (including dummies) to edit other information in the files that will go into the database.

[ghost]

also why is the fileItem index ALWAYS null?

[tmccord]

I have been trying to show the already uploaded files into the uploader queue but it is not displaying.

 var file;
    $http.get(url, { responseType: "blob" }).then(function(data, status, headers, config) {
        var mimetype = data.type;
        file = new File([data], "sample.jpg", { type: mimetype });
    }, function() {
    });
    var dummy = new FileUploader.FileItem(uploader, {});
    dummy._file = file;
    dummy.file.mediaId = 122;
    dummy.file.name = 'sample.jpg';
    dummy.file.type = 'image/jpeg';
    dummy.file.isProfile = false;

    dummy.progress = 100;
    dummy.size = 10000;
    dummy.isUploaded = true;
    dummy.isSuccess = true;
    uploader.queue.push(dummy);  

[sakram80]

Put dummy FileItem inside get request, then it will work fine ...

[vlzkonopatov]

everything is fine but would also add to the image displayed ?

[Condor2708]

I have a requirement that requires IE11 .. The problem is File object is not supported? Do you know which object I can use in javascript to replace the File ? Thanks

[alkaj]

Hi! i have a problem trying to preview an image that is not on the same folder with my page, i would like to know if it is possible and how.
It previews normally with files(i mean image files) on the same path with the html page.
Thanks in advance...

[alvaromlg]

Maybe it helps someone. Using the plugin provided above just by adding the file to the queue it doenst tigger the event uploader.onAfterAddingFile(dummy);, you have to call it manually

[xkidro]

Hello! Sorry to bump this issue, I implemented this solution, however I couldn't not get it to refresh the list ? it does show my files if I add an item from the upload button or the drop zone.

I am using angular but I do the request with jQuery (I know it's not the angular way but I will do refactoring soon)

    $.get(api_intern+'type=files',function(data){
        var data = $.parseJSON(data).data;
        if(data){
            for(var i in data){
                var fileItems = [];

                fileItems[i] = new FileUploader.FileItem(uploader, {
                    dateModified: 'today',
                    size: data[i].size,
                    type: data[i].type,
                    name: data[i].name
                });

                fileItems[i].progress = 100;
                fileItems[i].isUploaded = true;
                fileItems[i].isReady = true;
                fileItems[i].isSuccess = true;

                uploader.queue.push(fileItems[i]);
                uploader.onAfterAddingFile(fileItems[i]);
            }
        }
    });

Another question I have is how do I remove it on the server also when I click the remove button, I looked in the code however I did not see if there is any remove item callback, sorry for bumping this, I see that other people got this working and I don't know exactly what they did, I did try to trigger the callbacks I saw (onAfterAddingFile and onAfterAddingAll) however they still don't show up.

thanks in advance.

[xkidro]

Hello guys, I managed to solve the problem, you just need to call uploader._render(); after you add to the queue.

data is my file array

            var fileItems = [];

            for(var i in data){

                var fileItem = new FileUploader.FileItem(uploader, {
                    dateModified: 'today',
                    size: data[i].size,
                    type: data[i].type,
                    name: data[i].name
                });

                fileItem.progress = 100;
                fileItem.isUploaded = true;
                fileItem.isSuccess = true;

                fileItems.push(fileItem);
                uploader.queue.push(fileItem);
                uploader.onAfterAddingFile(fileItem);
            }

            uploader.onAfterAddingAll(fileItems);
            uploader._render();

[saivasu007]

Hi,
I am running into some issues and couldn't able to identify how to get the dataURL for the file trying to upload. Ultimately i need to get the dataURL for each file and update in the mongoDB.

Appreciated your help on this.

[gerome0123]

@xkidro can you create a jsfiddle so i can understand more thanks 😘

[gerome0123]

@mfundo hi sir do u have a jsfiddle so i can undestand more thanks

[xkidro]

@gerome0123 I can't make a jsfiddle, here is the full controler.

'use strict';

myApp.controller('FileUploadCtrl', ['$scope', 'FileUploader', function($scope, FileUploader) {

    var id = $scope.$state.params.id;
    var api_intern = api + 'table=pdf&id='+id+'&';

    var uploader = $scope.uploader = new FileUploader({
        url: api_intern+'type=upload'
    });

    $('.file-drop-zone').on('click',function() {
      $('.file-drop-zone .hidden').click();
    });

    $.get(api_intern+'type=files',function(data){
        var data = $.parseJSON(data).data;
        if(data){
            var fileItems = [];

            for(var i in data){

                var fileItem = new FileUploader.FileItem(uploader, data[i]);

                fileItem.file.id = data[i].id;
                fileItem.progress = 100;
                fileItem.isUploaded = true;
                fileItem.isSuccess = true;

                fileItems.push(fileItem);
                uploader.queue.push(fileItem);
                uploader._onAfterAddingFile(fileItem);
            }

            uploader._onAfterAddingAll(fileItems);
            uploader._render();
        }
    });

    // CALLBACKS

    uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/ , filter, options) {
        //console.info('onWhenAddingFileFailed', item, filter, options);
    };
    uploader.onAfterAddingFile = function(fileItem) {
        //console.info('onAfterAddingFile', fileItem);
    };
    uploader.onAfterAddingAll = function(addedFileItems) {
        //console.info('onAfterAddingAll', addedFileItems);
    };
    uploader.onBeforeUploadItem = function(item) {
        //console.info('onBeforeUploadItem', item);
    };
    uploader.onBeforeRemoveItem = function(item) {
        if(item.isUploaded){
            $.get(api_intern+'type=delete_file&file_id='+item.file.id);
        }
        //console.info('onBeforeRemoveItem', item);
    };
    uploader.onProgressItem = function(fileItem, progress) {
        //console.info('onProgressItem', fileItem, progress);
    };
    uploader.onProgressAll = function(progress) {
        //console.info('onProgressAll', progress);
    };
    uploader.onSuccessItem = function(fileItem, response, status, headers) {
        fileItem.file.id = response.data.id;
        if(response.data.name){
            fileItem.file.name = response.data.name;
        }
        //console.info('onSuccessItem', fileItem, response, status, headers);
    };
    uploader.onErrorItem = function(fileItem, response, status, headers) {
        //console.info('onErrorItem', fileItem, response, status, headers);
    };
    uploader.onCancelItem = function(fileItem, response, status, headers) {
        //console.info('onCancelItem', fileItem, response, status, headers);
    };
    uploader.onCompleteItem = function(fileItem, response, status, headers) {
        //console.info('onCompleteItem', fileItem, response, status, headers);
    };
    uploader.onCompleteAll = function() {
        //console.info('onCompleteAll');
    };

    //console.info('uploader', uploader);
    
}]);

[gerome0123]

@xkidro thanks for the reply can i see your view?

[miraghe]

In my case nothing works, I guess maybe there are recent changes in $http.get that makes all of the above code fail for me, anyway, after testing all code of the examples in this post, I was able to make it work:

var url = 'directory/imagen.jpg';

$http.get(url, { responseType: "blob" }).then(
function(data, status, headers, config) {

var iname = data.config.url.substr(data.config.url.lastIndexOf('/') + 1);
var idata = data.data;
var itype = idata.type;

var file = new File([idata], iname, { type: itype});

uploader.addToQueue(file);

},
function() {
});

That's all, addToQueue calls to onAfterAddingFile and render.

In case you need to change file attributes like isUploaded, I think addToQueue options allow do it, but I was unable to change it, so instead I just use the next lines of code after the addToQueue call

var dummy = uploader.queue[uploader.queue.length - 1];

dummy.progress = 100;
dummy.isUploaded = true;
dummy.isSuccess = true;

Hope that helps someone.

[th3v0ice]

If you want to have $_FILES populated inside the PHP once you submit the data, you need to add the var file =... lines from the code snippet below.

var dummy = new FileUploader.FileItem(uploader, {
    lastModifiedDate: new Date(),
    size: item.size,
    type: 'video/mp4',
    name: item.name
});

//Following two lines
var file = new File(["hello"], item.name, {size: item.size, type:"video/mp4", lastModifiedDate: new Date()});
dummy._file = file;

dummy.progress = 20;
dummy.isUploaded = false;
dummy.isSuccess = false;

uploader.onAfterAddingFile(dummy);
uploader.queue.push(dummy);