How to make UI of multiple image upload on tailwindcss. I am new to this and dont know what to do..
My form blade
@extends('layouts.custom')
@section('content')
<div class="bg-gray-300">
<div class="bg-white rounded-lg overflow-hidden">
<div class="md:flex">
<div class="w-full">
<div class="p-4 border-b-2"> <span class="text-lg font-bold text-gray-600">Add documents</span> </div>
<div class="p-3">
<form action="/store_single_image/{{ Auth::user()->id }}" method="post" enctype="multipart/form-data">
@csrf
<div class="mb-2">
<span class="text-sm">Name</span>
<input type="text" name="name" :value="old('name')" required autofocus class="h-12 px-3 w-full border-gray-200 border rounded focus:outline-none focus:border-gray-300">
</div>
<div class="mb-2">
<span class="text-sm">Description</span>
<textarea name="description" :value="old('description')" class="h-12 px-3 w-full border-gray-200 border rounded focus:outline-none focus:border-gray-300" cols="30" rows="10"></textarea>
</div>
<div class="mb-2">
<span>Attachments</span>
<div class="relative h-40 rounded-lg border-dashed border-2 border-gray-200 bg-white flex justify-center items-center hover:cursor-pointer">
<div class="absolute">
<div class="flex flex-col items-center ">
<i class="fa fa-cloud-upload fa-3x text-gray-200"></i>
<span class="block text-gray-400 font-normal">Attach you files here</span>
<span class="block text-gray-400 font-normal">or</span>
<span class="block text-blue-400 font-normal">Browse files</span>
</div>
</div>
<input type="file" name="image" required class="h-full w-full opacity-0">
</div>
</div>
<div class="mt-3 text-center pb-3">
<button class="w-full h-12 text-lg w-32 bg-blue-600 rounded text-white hover:bg-blue-700">Create</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@rafidahsan to simply get an array of multiple images add an array on the input name field
<input type="file" name="images[]" required class="h-full w-full opacity-0">
in your controller
dd($request->images);
to get image previews you have to learn some js
vuejs https://codepen.io/chenuin/pen/MdvyjG
jquery https://hackthestuff.com/article/javascript-how-to-preview-multiple-images-before-upload
I want to know how I code the UI @wakanda
Are you looking for a preview box @rafidahsan that can show the images? I see you're using a form tag so I'd imagine you want to display the images that are going to be submitted, and subsequentually you'd still want to show the images if the user decides to edit those.
You need a div with an id <img id="imgs"></div>, for the Javascript I just did something similar so here goes, this should preview multiple images that belong to 1 post.
<script>
$("#image").on('change',function() {
var fileList = this.files;
for(var i = 0; i < fileList.length; i++)
{
var t = window.URL || window.webkitURL;
var objectUrl = t.createObjectURL(fileList[i]);
$('#imgs').append(`
<div>
<img class="h-48 border-2" src="` + objectUrl + `" />
</div>`
);
j = i+1;
if(j % 3 == 0)
{
$('#imgs').append('<br>');
}
}
});
</script>
Please or to participate in this conversation.