Multi Image Uploading component prebuild for Inertia.js?

While there isn't a pre-built component that works specifically with Inertia.js for handling multi-image uploads to Amazon S3 with all CRUD operations out of the box, you can create one using a combination of Vue.js (or React, depending on your preference), Inertia.js, and a backend framework like Laravel.

Here's a high-level solution using Vue.js and Laravel:

1. Frontend with Vue.js and Inertia.js:

You'll need to create a Vue component that handles file inputs and can upload multiple files. You can use the FormData API to append files and send them to the server.

<template>
  <div>
    <input type="file" multiple @change="handleFileUpload" />
    <button @click="submit">Upload</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
    };
  },
  methods: {
    handleFileUpload(event) {
      this.files = event.target.files;
    },
    submit() {
      let formData = new FormData();

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

      this.$inertia.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
    },
  },
};
</script>

1. Backend with Laravel:

On the backend, you can use Laravel's filesystem to handle file uploads. You'll need to configure the filesystem to use Amazon S3.

In your config/filesystems.php, make sure you have the S3 disk configured:

's3' => [
    'driver' => 's3',
    'key' => env('AWS_ACCESS_KEY_ID'),
    'secret' => env('AWS_SECRET_ACCESS_KEY'),
    'region' => env('AWS_DEFAULT_REGION'),
    'bucket' => env('AWS_BUCKET'),
    'url' => env('AWS_URL'),
    'endpoint' => env('AWS_ENDPOINT'),
],

Then, in your controller, you can handle the file upload:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

public function upload(Request $request)
{
    $images = $request->file('images');

    foreach ($images as $image) {
        $path = $image->store('images', 's3');
        // You can save the $path to the database if you want to keep track of the images
    }

    return redirect()->back()->with('success', 'Images uploaded successfully.');
}

1. CRUD Operations:

For CRUD operations, you would need to build out additional methods in your controller to handle each action (Create, Read, Update, Delete). For example, to delete an image, you would use Storage::disk('s3')->delete($filePath);.

Remember to handle the security aspects, such as validating the file types and sizes before uploading them to S3.

This is a simplified example to get you started. Depending on your application's needs, you might need to add more features, such as progress bars, error handling, image resizing, etc. There are also Vue.js libraries like vue-dropzone that can help you with the frontend part for a more feature-rich file upload experience.