What's the best approach for a multiple images upload system?

On laravel that has been discussed many times, intervention is one.

But if you punch into Google

site:laracasts.com multiple image upload with Ajax

There will be several hits

Of course change search term as needed.

Explanation the search here it's not as powerful as a Google search.

can't remember the specific details, but dropzone supports synchronous uploads (by default its async) so that the images are sent along with the form data

I agree with @snapey, Dropzone.js is a good library to multiple upload. I uses it in a lot of my projects. The first time I dit it, I followed this tutorial https://www.qcode.in/reusable-upload-component-in-laravel-with-dropzone-js/

Thanks for the advice.

What about if I base64 encode every image and store it in a hidden input? Does that make sense to you guys?

no not really. This seems pointless. Whats wrong with using regular uploads?

I would post the other form data with ajax, get a reference id or token back from the backend for this form posting, then send the images using this id in the post url so that you know what the images are related to.

I already stated some of the cons before, you need to keep track of those files and take care of deleting them if the user decide to discard the post, which you don't have a reliable way to determine.

Now I ask you @snapey: What is wrong with what I suggested? Can you substantiate your opinion?

You need to practice this stuff, if the submit button is hit everything is going to go through.

So as far as deleting you have an image called myprettyface.jpg which name is stored in a field which matches a stored image therefore easy to find and delete.

And of course if uploading multiple they go to a related table.

And it doesn't matter whether ajax or not is used it works the same way.

In other words the user isn't uploading one at a time allow the user to choose several and when submit is hit all of those are uploaded.

I wouldn't want too many at one time because of memory problems I usually like restricting to three or four at a time.

But seriously practice some of this on a little test project.

What about if I base64 encode every image and store it in a hidden input? Does that make sense to you guys?

because this is exactly the same as submitting files with the form using regular file inputs. You craft a method to upload files as base64 and don't achieve anything different to standard form file input

I as I am sure others here have uploaded single and multiple files for years and never have come up with these problems.

As I said just practice on a small test project and all will be okay.

Ajax, Drop Zone, intervention, regular, it makes no difference uploading is uploading.

because this is exactly the same as submitting files with the form using regular file inputs. You craft a method to upload files as base64 and don't achieve anything different to standard form file input

It's not the same since this way you can reuse a single input to handle multiple files.

Anyway, my main goal is to keep everything client side and send everything at once. That's what I would like to read about.

@klm113 that's the way file uploads work anyway, it's client side until submit is hit.

I already know that @jlrdw

See https://laraveldaily.com/upload-multiple-files-laravel-5-4/

It's a little older article, might help.

And https://laraveldaily.com/multiple-file-upload-with-dropzone-js-and-laravel-medialibrary-package/

There are many tutorials out there. Give me a couple of minutes, I will also have a screenshot.

Top image 4 allowed

bottom just example 1 to 4 can be use

If an image is missing nothing is stored in that field.

I was mostly trying to read some experiences, I know there are a bunch of guides and tutorials out there. Thanks anyways.

The tricky part at least for me is to keep everything client-side until the form is sent, otherwise I'd have to save and restore every single input with every new upload

You mean you are refershing the page every time? Use XMLHttp! Uploads are stored in your server /tmp usually, if the POST didn't go through the uploads will not be moved to your file storage folder. `

As for file upload input vs base64, there's a big difference. file input will be an instance of Symphony's UploadedFile with all it's methods to check the attributes while base64 is a string without any such options.

At the same time I need to server-side check the attributes of the image the user is trying to upload are valid/allowed.

Use Laravel's validation on file uploads such as mime type.

I have editable image uploads where the edited version will be a base64. A way to check could be to create an image file from that string and open it in a php image class to get the attributes. Cumbersome maybe ;)

Javascript can do it too assuming your users won't tamper with it. And the editable feature (cropperjs in my case) won't work without a valid image anyway.

public function handle(Filesystem $filesystem)
  {
    try
    {
      if ($this->file || $this->cropped)
      {
        $file = $this->cropped ? base64_decode(str_replace('data:image/png;base64,', '', $this->cropped)) : null;

        if (!$file && $this->file instanceof UploadedFile)
          $file = $this->file->get();

        if (!$file)
          return false;

        $fileName = strtolower(str_replace(' ', '-', $this->location));

        $filesystem->put(
          config('catalog.disks.archive.folder') . $fileName, $file);

        return $fileName;
      }
    } catch (\Exception $e)
    {
      //
    }
  }