Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lukeboy_2002's avatar

extension "" is not previewable

I made earlier a post how to upload a image with livewire. https://laracasts.com/discuss/channels/livewire/profile-image-2

Now i get a error when showing a temporary file File with extension "" is not previewable. See the livewire.temporary file upload.preview_mimes config.

I think something in this code is not correct.

            @if ($image && method_exists($image, 'temporaryUrl'))
                <img src="{{ $image->temporaryUrl() }}" class="w-full h-auto" alt=""/>
            @elseif($image)
                <img src="{{ $image }}" class="object-center mb-4 w-full h-auto" alt=""/>
            @endif

Even with the error, the image is stored on the server and in the database. And after a refresh the image is showing

0 likes
2 replies
LaryAI's avatar
LaryAI
AI
Best Answer
Level 58

The error message "File with extension '' is not previewable" typically occurs when Livewire is unable to determine the MIME type of the uploaded file, or the file type is not included in the livewire.temporary_file_upload.preview_mimes configuration.

Here's how you can address this issue:

  1. Check MIME Type Configuration: Ensure that the MIME type of the file you are trying to preview is included in the preview_mimes configuration. You can do this by adding the MIME type to your config/livewire.php file.

    'temporary_file_upload' => [
        'preview_mimes' => [
            'image/jpeg',
            'image/png',
            'image/gif',
            // Add other MIME types you need
        ],
    ],
    
  2. Verify File Upload: Make sure that the file being uploaded is indeed an image and that it has a valid extension. Sometimes, files without extensions or with incorrect extensions can cause this issue.

  3. Check File Upload Logic: Ensure that the file upload logic in your Livewire component is correctly handling the file. For example, make sure you are using the File or UploadedFile class to handle the file upload.

  4. Debugging: Add some debugging to check what type of file is being uploaded. You can log the file's MIME type and extension to see if there's anything unusual.

    if ($image) {
        \Log::info('File MIME Type: ' . $image->getMimeType());
        \Log::info('File Extension: ' . $image->getClientOriginalExtension());
    }
    
  5. Update Livewire: Ensure you are using the latest version of Livewire, as updates may include fixes for issues related to file uploads.

By following these steps, you should be able to resolve the issue with the file not being previewable. If the problem persists, consider checking the server's file upload settings or any middleware that might be affecting file uploads.

Please or to participate in this conversation.