Uppy: Initialize uppy with files

[davvyy00]

How can I initialize an uppy dashboard with photos

[arturi]

Hi! Do you mean that you want Uppy to have some files in it, before the user adds them? Like, pre-selected files?

You can do that with uppy.addFile(), but Uppy will then try to upload those files among with user-selected. You can mark these files as complete by setting progress.uploadComplete = true, like so:

uppy.getFiles().forEach(file => {
  uppy.setFileState(file.id, { 
    progress: { uploadComplete: true, uploadStarted: false } 
  })
})

[davvyy00]

ok @arturi that works, but still want the files to be editable?

[davvyy00]

[xoubaxo]

Hi!

I have a similar problem, which is that I can not get addfile() to work with images that have already been uploaded before. Could you put the code you apply to upload the images?
Thank you!

[arturi]

that works, but still want the files to be editable?

try not setting uploadStarted.

[arturi]

@xoubaxo not sure I understood the question, sorry

[mikekoro]

@arturi

So I am trying not to upload some files and according to your suggestion I loop through and mark each file that I do not wish to upload like so:

this.uppy.getFiles().forEach(file => {

       if(file.source == "remote") {
            // source = remote is how I "mark" them previoulsy
            this.uppy.setFileState(file.id, { 
                 progress: { uploadComplete: true, uploadStarted: false } 
            });
       }

});

Next thing I do is run

this.uppy.upload().then((result) => {
        console.log("Additional files have been uploaded", result)
});

So it actually completely ignores the fact that those files have been marked as "no-go" and uploads them anyway. Am I missing something here or things have changed?

Update Actually I had to use { uploadComplete: true, uploadStarted: true } instead of false. Not it works as intended!

[sharifcse58]

Hi!

I have a similar problem, which is that I can not get addfile() to work with images that have already been uploaded before. Could you put the code you apply to upload the images?
Thank you!

fetch('{{asset("previouslyUplodedimagesUrl")}}')
                         .then((response) => response.blob()) // returns a Blob
                        .then((blob) => {
                    uppy.addFile({
                    name: '0YNRtJC4PHWltpPTW876N6YeGiyMOjRf3GJRSJof.jpeg', // image name 
                    type: blob.type,
                    data: blob,
                    remote:true
             });
             Object.keys(uppy.state.files).forEach(file => {
                uppy.setFileState(file, { 
                    progress: { uploadComplete: true, uploadStarted: true } 
                })
            })
 }) 

[ricardopacheco]

I tried the solution above and it worked fine. However, the button for making new uploads does not appear (DashboardPlugin).

How can I change the state so that it can add new files?

[adamcmoore]

This was a royal pain in my friday but I've found a working solution, for initialising Uppy with existing files & allowing those files to be removed. It works with single uploads, multiple uploads, and Companion. My solution is in Vue, but I'm hoping the below gist will help others using whatever frameworks.

Gist: Demonstration of Uppy Media Library functionality in Vue

Quick explanation of the solution, a lot of which came from this thread:

1. Initialise Uppy, with autoProceed: false.
2. Add each existing file with Uppy.addFile, with a meta key identifying it as existing on the server.
3. Once all files have been added and loaded, call Uppy.setOptions({ autoProceed: true }).
4. When the 'file-added' event is fired, set all existing files state as as uploadComplete: true and uploadStarted true. This will stop Uppy uploading the existing files.
5. In both the upload-success and upload-error events, set all existing files state as uploadComplete: false and uploadStarted false. This will allow the existing files to be removed again.

It's surprising this functionality isn't built in to an otherwise wonderful package.

[laertispappas]

Hi @arturi,

Thank you for the great library.

The use case here is to have a "gallery" like feature from the dashboard component to edit existing
uploads and from my understanding this is not supported at least not without making workarounds on the client side. For example:

cont images = ["1.jpeg", "2.jpeg", ...]
images.forEach(url => {
   this.http.get(url, { responseType: 'blob' }).subscribe(blob => {
        uppy.addFile({
          id: url,
          name: url,
          type: blob.type,
          data: blob,
        });
      });
})

// The above will show them but it will try to auto upload with autoProceed: true
// or workarounds like @adamcmoore mentioned.

I know that the scope of the library is to not have a "gallery" like functionality but since the dashboard is there already, I think it would be nice to support it by default. In my case, I need a good UI and It would be nice to use the exiting UI from the dashboard plugin. Im also not a FE developer and I have to spend a couple of hours to create a decent UI.

Last but not least the dashboard plugin allows creations of image uploads. Super but if I want to show them and edit / delete them I cannot.