Missing feature: Remove uploaded image

[marble]

Description:
Lets say our domain object has a $logo and a $firstName. When editing the record you can set and then empty $firstName back and forth. But with the current version of upload_example you CANNOT remove a $logo once it's uploaded. That should be possible as well.

What I've tried
... works only partly. That is, it works as long as objects are not persisted. I've added a checkbox for removing

In Fluid:

<f:form.checkbox name="offer[logo][submittedFile][remove]" value="remove"
                      id="logoSubmittedFileRemoveField"/>

And a clause in the UploadedFileReferenceConverter.php:

public function convertFrom($source, $targetType, array $convertedChildProperties = array(), PropertyMappingConfigurationInterface $configuration = NULL) {
    if (!isset($source['error']) || $source['error'] === \UPLOAD_ERR_NO_FILE) {
        if (isset($source['submittedFile']['remove']) && strlen($source['submittedFile']['remove'])) {
            // No new file is uploaded and the 'remove' checkbox is checked.
            // Forget a possibly attached resource
            return NULL;
        }
        if (isset($source['submittedFile']['resourcePointer'])) {
   ...

Good:
This works for non persisted files.

Bad:
It's not enough to just remove a file (reference!) in that way if it's persisted before. So you get for example:

Missing:
Code to delete the (FAL) file reference.

Sorry...
I'm trying to dive into extbase and fal and so ... but I'm not ready to come up with a solution yet.

[fsaris]

I did it by just remove the "hidden" element that holds current relation and save the form.

<h:form.upload property="image" class="upload-field" >
   <f:if condition="{resource}">
     <span class="preview">
       <f:image image="{resource}" alt="" width="50"/>
       <span href="#" onclick="$(this).parents('.upload-field:first').find('input[type=hidden]').remove(); $(this).parent().remove(); return false;" class="remove icon-remove">&#x2716;</span>
     </span>
   </f:if>
</h:form.upload>

Could be that above snippet doesn't work as I didn't cut/paste it from the project because there was a lot of more markup etc. But I think you should get the idea.

gr. Frans

[joekolade]

Hej Frans,
I try to implement your solution, but removing the corresponding fields

<input type="hidden" name="[EXTKEX][kompetenzprofile][europass][submittedFile][resourcePointer]" value="17915a47da85ed0b7e13df1f4a0cd303e98971dc2b93">

and

<input type="file" name="[EXTKEX][kompetenzprofile][europass]">

and saving the form afterwards (as when uploading files) wont delete my filereference at all....
Did you something in addition to get that to work?

[marble]

I talked with sritter at the T3DD15 about this stuff. Once the upload is persisted the file reference exists in the table. Next time you persist something, you'll have to remove superflous references on your own from the table. Use the normal TYPO3 database API.

[Shupal]

Cause the lack of a implemented delete function?;-)

so is the right way to remove references and update refindex via database API?

[marble]

Crosslink: See this great new post by maddy as well: http://ab-softlab.tumblr.com/post/119838114044/fileupload-in-frontend-using-typo3-6x-or-7-fal

[thomaskieslich]

Hi Martin,
this example is for a subobject, but it works:
Partial:

<f:for each="{room.bilder}" as="bild" iteration="bildNum">
            <div class="medium-3 columns">
              <f:image image="{bild}" width="240m" height="160m"/>
              <f:form.checkbox property="rooms.{it.index}.removeBild.{bildNum.index}" value="{bild.uid}" />löschen
            </div>
          </f:for>

in the room Model i add

/**
     * @var array
     */
    protected $removeBild = array();
plus Getter/Setter.
in Controller updateAction:
if(array_filter($room->getRemoveBild())){
                    $bilder = $room->getBilder();
                    foreach($bilder as $bild){
                        $imageId = $bild->getUid();
                        if(in_array($imageId, $room->getRemoveBild())){
                            $room->removeBild($bild);
                        }

                    }
                }

The Model must have a Part like:

public function removeBild(\TYPO3\CMS\Extbase\Domain\Model\FileReference $bild)
    {
        $this->bilder->detach($bild);
   }

Works fine, Greetings from Kiesi

[thomaskieslich]

    /**
     * bilder
     *
     * @var \TYPO3\CMS\Extbase\Persistence\ObjectStorage<\TYPO3\CMS\Extbase\Domain\Model\FileReference>
     */
    protected $bilder = null;

    /**
     * @var array
     */
    protected $removeBild = array();


    /**
     * @var \TYPO3\CMS\Extbase\Domain\Model\FileReference
     */
    protected $bild = null;

But have a look at the UploadedFileReferenceConverter. It must use the same FileReference Model. The original use a HelHum one.
Regards Thomas

[brisellda]

This linked helped me implement a remove-Function:
http://blog.typo3servers.info/show/typo3-extbase-fal-removedelete-image/

[marble]

@brisellda Hey, thank you, cool. To make it complete: Ghanshyam Gohel then points to http://blog.typo3servers.info/show/typo3-extbase-fal-image-upload as well. Looks good.

[ghanshyamgohel]

@brisellda @marble This is Ghanshyam Gohel.

Thanks for the point those links but unfortunately, expired those links.

Then, I have created complete example for FAL image upload and image delete here:

https://gist.github.com/ghanshyamgohel/43993b657797876fcee23752af87f31e

Note: I highly recommend to use upload_example extension by Mr. Helmut Hummel