'Laravel - how to use Uppy for image uploading

I have this project with image uploading and I use Uppy for it. Here is my code:

...
<div id="drag-drop-area" name="fotografije[]"></div>
<script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>
    <script>
        var uppy = Uppy.Core()
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'}) //you can put upload URL here, where you want to upload images

      uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
      })
    </script>
...

I tried with name="fotografije[]" in div but of course it doesn't help. All I need is to name this input so that my images can be uploaded to server. How can I do this with Uppy?

phplaravelimageuppy


Solution 1:[1]

So you need to download multiple files using Uppy Dashbord and Laravel

Is your backend server at https://master.tus.io/files/ ? correct it if needed.

Then you have to get back request sent from frontend to a controller (in your backend Laravel) that handle this request as Ajax POST.

This may be looks like (after adding in routes.php as POST)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class UploadFileController extends Controller
{


public function showUploadFile(Request $request) {

    $file = $request->file('fotografije');

    //Display File Name just for check or do a dd
    echo 'File Name: '.$file[0]->getClientOriginalName();


    //Move Uploaded File
    $destinationPath = 'uploads';
    $file->move($destinationPath,$file->getClientOriginalName());
 }
}

Also, don't forget to add crsf token to your uppy code to avoid bad request.

Hope this help

Solution 2:[2]

You can do like this

//this function runs after the file is uploaded
uppy.on('upload-success', (file, response) => {
  
  const url = response.uploadURL

  //get the name of file
  const fileName = file.name
  let text = "";

  //append the image after form using jquery/javascript
  //and you can send your images through form
  response.body.data.forEach(function (item, index) {
    text += index + ": " + item ;
    jQuery('<input>').attr({
      type: 'hidden',
      id: '',
      class: 'product_images',
      name: 'filename[]',
      value:item
    }).appendTo('#form_id');
  });
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Haris

Related Questions