Multiple files upload with vue axios and PHP - only one file is uploaded

Question

I'm trying to create a multiple file upload using vue and axios. My problem is that Only ine file will be uploaded to the server. Here is the code I' using: Template code

<input type="file" name="images[]" multiple ref="images" @change="handleUpload()">

JS code

//this is part of the handleUpload() vue method.

let formData = new FormData();

for(let i;i < $refs.images.files.length; i++){
 let file = this.$refs.images.files[i];
 formData.append('image', file);
}

axios.post('/upload', formData, { header: { 'Content-Type': 'multipart/form-data' } })
.then( (response) => console.log(response, response.data) )
.catch( (error) => console.log(error) );

PHP server code

// I'm using slim 4 and sirius upload to manage the file validation/upload
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;
use Psr\Http\Message\UploadedFileInterface;
use Slim\Factory\AppFactory;
use Sirius\Upload\Handler as UploadHandler;

require __DIR__ . '/vendor/autoload.php';

$app = AppFactory::create();

$app->post('/platform/api/v1/compress', function(Request $request, Response $response){

    $uploadHandler = new UploadHandler('/uploads');
    
        $uploadHandler->addRule('extension', ['allowed' => ['jpg', 'jpeg', 'png']]);
   
        $result = $uploadHandler->process( $request->getUploadedFiles() );
        
        // handle single input with single file upload
        if( $result->isValid() ){
            $result->confirm();
                   
            $url = ["master_image_url" => "/uploads/".$result->name];

            $response->getBody()->write(json_encode($url));
        }


    return $response;
});

$app->run();

How I can upload multiple files?Maybe I need to modify the code?

Ish · Accepted Answer · 2021-03-29 20:43:51Z

2

try changing "image" for "image[]" in the append function

Example:

for(let i;i < $refs.images.files.length; i++){
 let file = this.$refs.images.files[i];
 formData.append('image[]', file);
}

in server

$uploadedFiles=$request->getUploadedFiles();
foreach ($uploadedFiles['image'] as $uploadedFile) {
        if ($uploadedFile->getError() === UPLOAD_ERR_OK) {
           
        }
    }

edited Mar 29, 2021 at 20:43

Ish

29.7k11 gold badges62 silver badges78 bronze badges

answered Nov 14, 2020 at 18:44

jcHernande2

2912 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fed3vt Over a year ago

I need to test but I think that the problem is also with the server side code?not sure about

jcHernande2 Over a year ago

I think you should add foreach $request->getUploadedFiles()

fed3vt Over a year ago

I'm not sure about this, slim will provide a UploadedFileInterface object that will contain uploaded files. The Sirius library that I'm using to manage the upload process will accept and handle the PSR-7 UploadedFileInterface object, maybe there is some function that will handle multiple files but I'm not sure

Collectives™ on Stack Overflow

Multiple files upload with vue axios and PHP - only one file is uploaded

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related