Drag and Drop

<div x-data="dragAndDrop"

     class="relative flex justify-center items-center gap-2.5 flex-col bg-white border-2 border-ui-border hover:border-icon border-dashed rounded-[15px] py-6.5 max-w-[415px] w-full p-2 link text-icon transition duration-300"

     :class="{

        'border-icon': highlight,

        'border-ui-border bg-white text-icon': !highlight && status === null,

        'border-error bg-error-light text-error' : status === 'error',

        'border-success bg-success-light text-success' : status === 'success'

     }"

>

    <?= icon('document', 'w-8.5 shrink-0 text-icon m-2'); ?>

    <span class="text-center text-sm">Déposez votre document ici, ou <button class="text-background">téléchargez</button></span>

    <span class="text-center text-xs">PDF, Doc, JPG sont autorisé</span>

    <input x-ref="input" @change="change()" id="upload" type="file" accept="image/jpeg, application/pdf, application/doc" class="absolute inset-0 opacity-0 cursor-pointer" />

    <div x-show="status === 'error'" class="text-xxs text-error tracking-tightened font-medium">Ce type de fichier n'est pas accepté.</div>

</div>

<div x-data="dragAndDrop"

     class="relative flex justify-center items-center gap-2.5 flex-col bg-white border-2 border-ui-border hover:border-icon border-dashed rounded-[15px] py-6.5 max-w-[415px] w-full p-2 link text-icon transition duration-300"

     :class="{

        'border-icon': highlight,

        'border-ui-border bg-white text-icon': !highlight && status === null,

        'border-error bg-error-light text-error' : status === 'error',

        'border-success bg-success-light text-success' : status === 'success'

     }"

>

    <span class="text-center font-medium">Avant du véhicule</span>

    <?= icon('image', 'w-8.5 shrink-0 text-icon m-2'); ?>

    <span class="text-center text-sm">Déposez votre photo ici, ou <button class="text-background">téléchargez</button></span>

    <span class="text-center text-xs">PNG, JPG et GIF sont autorisé</span>

    <input x-ref="input" @change="change()" id="upload_image" type="file" accept="image/jpeg, application/png, application/gif" class="absolute inset-0 opacity-0 cursor-pointer" />

    <div x-show="status === 'error'" class="text-xxs text-error tracking-tightened font-medium">Ce type de fichier n'est pas accepté.</div>

</div>