Kunzilla's avatar

Multiple uploads with progress and preview (problem with identification)

Hi there, i build a mutliple fileupload with vue js and axios within laravel. The upload works great, but i stuck on the part with the previews. The upload must work and feel like the facebook image upload.

  1. Put your images in the upload-area
  2. The number of objects shows up with a loader
  3. The files that are successful uploaded are shown as a thumbnail (the files in progress are still as a loader)

The Problem: How an i identify the "progresses"? Number 3 of 4 can be faster uploaded as the first one, so i can't use the array keys. The only "unique" idenfitication will be the file_name, but whats happend when upload an image twice? (Makes no sense, but what if it happens)

Hope you understand my problem and can help.

Thanks!

0 likes
4 replies
Tomi's avatar

"Put your images in the upload-area" at this stage i would generate some ID key from the name and maybe timestamp when it was uploaded.

Kunzilla's avatar

Hi Tomi, thanks for your answer. Can you give me a example please

Thanks!

Kunzilla's avatar

@Tomi Do you mean i must create a assoc array with the data and filename+date (hashed) as key? A quick example are very welcome :)

Tomi's avatar

Yes i would build any Object on the javascript side to track the image progress.

let d = new Date();
let n = d.getTime();

let uploadState = {
    n + '_my_image' : {
        'file_name' => 'my_image'
        'status' => 'uploading'
    },
    n + '_other_image' : {
        'file_name' => '_other_image'
        'status' => 'done'
    }
}

something like this. With each action you perform you can update this object. Vue offers functionality called Watcher you can track change of a variable, that might also come handy.

But this is just an idea. How you implement it is on you. :)

Please or to participate in this conversation.