Support for .heic images

[kareemaladawy]

Package

Form builder

Package Version

v3.0.0

How can we help you?

Is there any way for the FileUpload component to handle .heic images?

[leandrocfe]

->acceptedFileTypes(['image/heic'])

?

[kareemaladawy]

Returns the following error when uploading the file: "File of invalid type"

[kareemaladawy]

However, if we remove acceptedFileTypes, the image is uploaded successfully but will have no preview, you can't see the image itself

[PaulMcML]

This will be because filepond, which the FileUpload component is using, doesn't support these files out of the box. We need to add something like

https://pqina.nl/pintura/docs/v8/examples/load-heic-image/

And I've used similar to add support in my own , non filament, components.

At least some tips on how to add a custom fileupload component that can take advantage of the technique in the above link would be appreciated.

[PaulMcML]

I got this working in the end, quite long winded but may help anyone else who lands here. Here's the gist of what I did.

• I created a new form component that inherits from the existing and overrides the view file

<?php

namespace App\FilamentFixes\Forms\Components;

use Filament\Forms\Components\FileUpload as UploadParent;

class FileUpload extends UploadParent
{
    protected string $view = 'forms.components.file-upload';
}

• The view file (in resources/views/forms/components/file-upload.blade.php') is a copy and paste of vendor/filament/forms/resources/views/components/file-upload.blade.php, with the 'ax-load-src' property changed to
  ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('file-upload-enhanced','filament-fixes/forms') }}"

• We need to compile a new file-upload javascript resource, so following the instructions here https://filamentphp.com/docs/3.x/support/assets under 'asynchronous alpine.js components' I created a bin/build.js file , amending the example to use my component files.

• I created a resources/js/filament/forms/components/file-upload-enhanced.js, which is initially a copy and paste of vendor/filament/forms/resources/js/components/file-upload.js. This is the file which should be referenced in the build.js created above i.e.

compile({
    ...defaultOptions,
    entryPoints: ['./resources/js/filament/forms/components/file-upload-enhanced.js'],
    outfile: './resources/js/dist/components/file-upload-enhanced.js',
})

• For the build.js to work, you will need to install a bunch of the filepond plugins via npm, you will also want heic2any
• You need to register the new component in one of your service providers e.g.

      FilamentAsset::register([
           AlpineComponent::make('file-upload-enhanced', __DIR__ . '/../../../resources/js/dist/components/file-upload-enhanced.js'),
       ], 'filament-fixes/forms');

• You can then build and copy into assets the new javascript files with

node bin/build.js 
php artisan filament:assets

You'll need to run this anytime you make changes to your file-upload-enhanced.js file (I'm sure you'll name these files better than me).

• To add the HEIC support, in your file-upload-enhanced.js, first add
  import heic2any from "heic2any";
  And then in 'FilePond.create' you can add a beforeAddFile callback, around line 199

              imageEditEditor: {
                   open: (file) => this.loadEditor(file),
                   onconfirm: () => {},
                   oncancel: () => this.closeEditor(),
                   onclose: () => this.closeEditor(),
               },
               beforeAddFile: async (fileItem) => {
   				const file = fileItem.file;
   				// Check if the file is HEIC/HEIF
   				if (file.type === "image/heic" || file.type === "image/heif") {
   					try {
   					  // Convert HEIC/HEIF to JPEG
   					  const convertedBlob = await heic2any({
   					    blob: file,
   					    toType: "image/jpeg",
   					  });

   					  // Replace the file with the converted one
   					  const convertedFile = new File(
   					    [convertedBlob],
   					    file.name.replace(/\..+$/, ".jpg"),
   					    { type: "image/jpeg" }
   					  );

   					  this.pond.addFile(convertedFile);
   					  // stop the original file uploading
   					  return false;

   					} catch (error) {
   					  console.error("HEIC conversion failed", error);
   					  return false; // Cancel the upload
   					}
   				}
   				return true;	                	
               }

• You then need to use your custom Forms\Components\FileUpload class in your forms rather than the standard