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: true } 
  })
})

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

[christianhultin]

Hey and thanks for a great library guys!

Question: Since we are using s3 multipart (and next.js) we can't use golden-retriever to resume our uploads according to this. At this moment we only want to prevent users uploading finished files again after e.g. a reload, but we want to keep the state in Uppy to not spread it out in different places. Can't get the above to work, as soon as someone adds a new file (that should start uploading) all the "preloaded" files (that have already been uploaded) start uploading again, any thoughts? Any new solution in place? Can we manually store the full uppy state and reload it somehow?

Was thinking about connecting the state to a custom store and store the full state in indexDB maybe...

[bartzy]

Hi,

In the current version (1.16.1), doing the following doesn't work when an uploader (S3 Multipart plugin) is attached:

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

It still tries to upload the file. Is there a workaround for telling uppy a file is completed?

[christianhultin]

Hi,

In the current version (1.16.1), doing the following doesn't work when an uploader (S3 Multipart plugin) is attached:

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

It still tries to upload the file. Is there a workaround for telling uppy a file is completed?

I have the same issue, I posted a PR that I think would help here

[bartzy]

@christianhultin Yep I saw it and try to apply it, but I think in my case uppy doesn't even get there before it attempts to upload (tested with console logging just before that if statement).

You're using the AwsS3Multipart plugin and the PR works for you?

[bartzy]

@christianhultin Yep I saw it and try to apply it, but I think in my case uppy doesn't even get there before it attempts to upload (tested with console logging just before that if statement).

Sorry - The console.log() calls I added do get called when starting an upload. But adding that !file.progress.uploadComplete to the condition doesn't help with the file still being uploaded.

[christianhultin]

@christianhultin Yep I saw it and try to apply it, but I think in my case uppy doesn't even get there before it attempts to upload (tested with console logging just before that if statement).

You're using the AwsS3Multipart plugin and the PR works for you?

I tested it briefly when I did the PR, gonna check it again, but yeah it worked for me. Would be great if someone could look at the PR though from the team :)

Had any other luck in other solutions @bartzy ? Gonna have to handle this myself in our application within the next few days

[christianhultin]

For anyone else running into this issue, I manage to solve it (adding a file and marking it as complete right away) by doing the following:

const uppyFileId = uppy.addFile(file);
const fileFromUppy = uppy.getFile(uppyFileId);
uppy.emit('upload-started', fileFromUppy);
uppy.emit('upload-progress', fileFromUppy, {
  bytesUploaded: file.size,
  bytesTotal: file.size,
});
uppy.emit('upload-success', fileFromUppy, 'success');

[timodwhit]

With the approach above, you end up writing to the state for every file. Over a large amount of files this can cause a drastic slow down. I have seen state set take about 2ms for 10k files. To optiimize:

const stateFiles = { ...uppy.getState().files }
Object.keys(stateFiles).forEach(fid => {
  stateFiles[fid].progress = {
     ...stateFiles[fid].progress,
     uploadComplete: true,
     uploadStarted: true
   }
 });
 uppy.setState({ files: stateFiles })

[devxpy]

This seems to work well for me

const uppy = new Uppy({
  ...
  // ensure autoProceed is false or not set
})
const fileId = uppy.addFile({
  name: "myfile.pdf",
  type: "application/pdf",
  data: new Blob(),
});
uppy.setFileState(fileId, {
  progress: { uploadComplete: true, uploadStarted: true },
  uploadURL: "https://example.com/path/to/myfile.pdf", // optional - for use with showLinkToFileUploadResult
});
// only set this after initial files have been added
uppy.setOptions({
  autoProceed: true,
});

To allow removing files after upload, set showRemoveButtonAfterComplete on the Dashboard

[KingR1]

Hi @arturi
I am loading uploaded files in uppy dashboard as was suggested above.

const fileId = this.uppy.addFile({
            name: attachmentFile.fileName,
            type: attachmentFile.contentType,
            data: attachmentFile.fileData,
            size: attachmentFile.fileSize,
            isRemote: true,
            meta: {
              externalFileId: attachmentFile.fileId
            }
          });

          this.uppy.setFileState(fileId, {
            progress: {
              uploadComplete: true,
              uploadStarted: true,
              bytesTotal: attachmentFile.fileSize
            }
          });

but after file size is shown as 0 in dashboard. What is correct property/setting to show file size? Thx

[90dy]

This seems to work well for me

const uppy = new Uppy({
  ...
  // ensure autoProceed is false or not set
})
const fileId = uppy.addFile({
  name: "myfile.pdf",
  type: "application/pdf",
  data: new Blob(),
});
uppy.setFileState(fileId, {
  progress: { uploadComplete: true, uploadStarted: true },
  uploadURL: "https://example.com/path/to/myfile.pdf", // optional - for use with showLinkToFileUploadResult
});
// only set this after initial files have been added
uppy.setOptions({
  autoProceed: true,
});

To allow removing files after upload, set showRemoveButtonAfterComplete on the Dashboard

Seems to be the best answer