Uploading multiple base64 images fails the request

I've got an image uploader in my frontend that needs to preview the image before uploading. so in my frontend I convert the uploaded image to base64, display it.. then on form submission I send the base64 to the backend that converts it back to image and save on my storage. Everythings works fine just when I upload only one image!

BUT. if I upload more that once the request sends nothing. neither images nor title nor anything. If I die dump the request->all(); I get an empty array!

my frontend code:

const handleImages = ($event) => {
    let files = $event.target.files;
    files.forEach((file) => {
        const reader = new FileReader();
        let rawImg;
        reader.onloadend = () => {
            rawImg = reader.result;
            form.images.push(rawImg);
        };
        reader.readAsDataURL(file);
    });
};

<form @submit.prevent="form.post(route('articles.store'))" enctype="multipart/form-data">
<input class="form-control" type="file" id="file" @change="handleImages" multiple />
<!-- And some other text inputs -->
</form>

on my backend:

    public function store(Request $request, ArticleService $service)
    {
        dd($request->all());
        // Store it
        $service->create($request->validated());

        // Redirect to index.
        return redirect()->route('articles.index')->with('message', __('Article created successfully'));
    }

You see I run dd($request->all()); thus, nothing should interrupt my request and it should display the request once the request hits the backend.

Now testing: if I upload one picture this is the response

array:9 [▼ // app/Http/Controllers/Admin/ArticleController.php:67
  "category_id" => 20
  "title_ar" => "test"
  "title_en" => null
  "news_date" => "2023-02-19"
  "images" => array:1 [▶] // The array of the base64 images (contains only one base64 image which I uploaded)
  "summary_ar" => "test"
  "summary_en" => null
  "content_ar" => "<p>test</p>"
  "content_en" => null
]

now if I try to upload more than one lets say 2 images.. I get empty array

[] // app/Http/Controllers/Admin/ArticleController.php:67

azimidev

3 years ago

Level 55

Have you checked the request size? it might be exceeded by what the server can handle.

php_value upload_max_filesize 10M
php_value post_max_size 10M

you can split your image uploads into separate requests to avoid exceeding the limit.

const handleImages = ($event) => {
    let files = $event.target.files;
    let images = [];
    for (let i = 0; i < files.length; i++) {
        const reader = new FileReader();
        reader.onloadend = () => {
            images.push(reader.result);
            if (images.length == files.length) {
                form.images = images;
                form.post(route('articles.store'));
            }
        };
        reader.readAsDataURL(files[i]);
    }
};

sh1r3f

3 years ago

Best Answer

Level 1

Solved by displaying the base64 image in the browser and posting the file itself before converting.

Please or to participate in this conversation.