Upload Field Styling & Bootstrap

A small contribution:
The javascript code to change the placeholder don't always work, when click on browse and dont actually choose a file the place holder wont change because inputFile.files[0].name is not define and will throw an exception I fixed it by counting the number of files selected and if its zero then put "select a file instead of the file name.

$('.custom-file-input').on('change', function(event) {
            var inputFile = event.currentTarget;
            if(inputFile.files.length===0){
                $(inputFile).parent()
                    .find('.custom-file-label')
                    .html("Select one image");
            }else {
                $(inputFile).parent()
                    .find('.custom-file-label')
                    .html(inputFile.files[0].name);
            }

        });

Bonus, for a multiple file field you should use this one :

$('.custom-file-input').on('change', function(event) {
            var inputFile = event.currentTarget;
            if(inputFile.files.length===0){
                $(inputFile).parent()
                    .find('.custom-file-label')
                    .html("Select one or many images");
            }else {
                var placeholder = "";
                $.each(inputFile.files,function (index , value) {
                    placeholder += value.name+" ";
                });
                $(inputFile).parent()
                    .find('.custom-file-label')
                    .html(placeholder);
            }
        });

<b>It Rocks #RyanVoice
</b>

Hey Mamour W.!

Nice catch on that edge case! I see it now: if I (A) select a file and then (B) go back and select NO file, then the change event is triggered, but the files are empty. Excellent catch - thanks for sharing that :).

It Rocks #RyanVoice

😂

Cheers!

Is there a way to get the upload field to display the value of a currently uploaded image (which, in this case, would be a string representing an image path, in my case), before clicking "Choose File" and replacing the currently uploaded image? Can a FileType field store a string value for a currently uploaded URL?

Hey @Jeff!

Hmm. Part of this answer depends on exactly WHERE you want to show the filename. Fore example, on solution would be to do a "form theme" for just this one field - e.g. - https://symfonycasts.com/screencast/symfony-forms/custom-field-theme - or render the field a bit more manually - something like this:

<div>
    {{ form_label(articleForm.imageFilename) }}
    {{ form_widget(articleForm.imageFilename) }}
    {% if articleForm.imageFilename.vars.data %}
        ({{ articleForm.imageFilename.vars.data }})
    {% endif %}
    {{ form_errors(articleForm.imageFilename) }}
</div>

(the trick here is getting all the styling / CSS classes correct since you're taking more control over things).

OR, you might want to do something a bit more similar to what we do in the video: where we replace the label with the current filename. In that case, it can be done when rendering the field:

{{ form_row(articleForm.imageFile, {
    label: articleForm.imageFilename.vars.data ?: 'Choose an image'
}) }}

Let me know if that helps :)

Cheers!

$(inputFile).parent().find('.custom-file-label').html()<br />

Shouldn't that be .text()?

Hey there!

Yea, I think you're right, since we're not injecting any HTML content, it would be safer to use the .text() function

Cheers!

Really thanks, save my day

4:15 https://hackernoon.com/why-...

Hey TomaszGasior!

You're right! But in this case, because I'm writing this code in my template (and not in a system where it will be compiled/transpiled with Babel), I'm being conservative: about 5% of browsers still don't support "var". So it's "probably" safe to use on my sites... but I'm being conservative. Of course, inside a Webpack-powered system, it's fine because if you need to support older browser, you can allow it to rewrite that code for you.

Cheers!

Probably you are right but please consult https://caniuse.com/#feat=let . For my country it shows 95% coverage. :)

Yea, you may want to ignore that missing 5% but as Ryan said, the best way would be to use Encore Webpack and let it compile your javascript

Hello Ryan,

sorry to disturb.

I would like to customize also the label of the file field (ie the "Browse" button) changing the text and adding a on hover effect, but I have big difficulties in finding where and what should change.

can you please just give me a hint in the right direction?

thank you for your attention and for the great job you do!

cheers

Hey chieroz

Nice question! You made me dig :)

What's happening here is that Bootstrap4 adds the text of the button via CSS. If you inspect that element, you will notice that the button is added via a pseudo-element (check the "custom-file-label" CSS class). What you can do is to override it by defining your own CSS rules for that class, or do it via Javascript (ugly)

Cheers!

Hello!

I have added as mimeTypes "text/csv" but validation failed even if the file is a csv file.

Error displayed:
The mime type of the file is invalid ("text/plain"). Allowed mime types are "text/csv".

If I dd my $uploadedFile variable, I can see that the mimeType value is set to "text/csv". Any idea?

Thx!

Hey be_tnt

How are you uploading your file? Remember that you need to specify the encryption type of your form as multipart/form-data. Also, just in case, double check your submitted file :)

Cheers!

Hi Diego,

I am using the FileType element so the multipart/form-data is added automatically to the form.

Cheers!

Oh, I see, that's even better :)
but then, why it's not working? Are you submitting your form via JS? I may need to see your code, if you can upload it to Github, so I can give it a look

Hello!
I do not have the code on Github. Let me try to give you as much information I can :)

In my controller:

`public function upload(Request $request, UploaderHelper $uploaderHelper, ValidatorInterface $validator)

	{
		$form = $this->createForm(UploadProspectType::class);

		$form->handleRequest($request);
		if ($form->isSubmitted() && $form->isValid()) {

			/**
			 * @var UploadedFile $uploadedFile
			 */
			$uploadedFile = $form['prospectsFile']->getData();

			$violations = $validator->validate(
				$uploadedFile,
				new File([
					'mimeTypes' => [
						'text/csv',
					]
				])
			);

			if ($violations->count() > 0) {
				/** @var ConstraintViolation $violation */
				$violation = $violations[0];

				$this->addFlash('error', $violation->getMessage());

				return $this->render('prospect/upload.html.twig', [
					'form' => $form->createView()
				]);
			}
			if ($uploadedFile) {
				$newFilename      = $uploaderHelper->uploadCSVFile($uploadedFile);
			}
		}

		return $this->render('prospect/upload.html.twig', [
			'form' => $form->createView()
		]);
	}`

In the form type:

public function buildForm(FormBuilderInterface $builder, array $options)
` {

		$builder
			->add('prospectsFile', FileType::class, [
				'label' => $this->translator->trans('form.file',[], 'prospects'),
			])
		;
	}`

In the view:
`{{ form_errors(form) }}
{{ form_start(form) }}

{{ form_widget(form) }}

<button type="submit" class="btn btn-primary">{{ button_text|trans }}</button>

{{ form_end(form) }}`

I also tried to add the constraint about extension in the buildForm function. Same result.

Thx in advance for your help!

Hmm, everything looks good... the only thing I can tell is that you didn't call {{ form_start(form) }} on your template, if that doesn't fix it, we are in troubles haha. Try clearing the cache, submit another csv file, double check your imports (you may have chosen a wrong one)

Cheers!

Hello!

The form_start call is in the template :) When I dump the information about the uploaded file (dd($uploadedfile)), it displayes:

UploadedFile^ {#64 ▼<br /> -test: false<br /> -originalName: "leads_solvary.csv"<br /> -mimeType: "text/csv"<br /> -error: 0<br /> path: "/private/var/folders/c_/t_wbmqbd3dz003yhxr8fgsqw0000gn/T"<br /> filename: "phpHshBYz"<br /> basename: "phpHshBYz"<br /> pathname: "/private/var/folders/c_/t_wbmqbd3dz003yhxr8fgsqw0000gn/T/phpHshBYz"<br /> extension: ""<br /> realPath: "/private/var/folders/c_/t_wbmqbd3dz003yhxr8fgsqw0000gn/T/phpHshBYz"<br /> aTime: 2019-07-18 16:10:23<br /> mTime: 2019-07-18 16:10:23<br /> cTime: 2019-07-18 16:10:23<br /> inode: 8844478793<br /> size: 1889<br /> perms: 0100600<br /> owner: 501<br /> group: 20<br /> type: "file"<br /> writable: true<br /> readable: true<br /> executable: false<br /> file: true<br /> dir: false<br /> link: false<br />}

As you can see, the mimeType is "text/csv". But the validation failed saying that I uploaded a "text/plain" file instead of a csv ...

By the way, in the mime types, I have added pdf ("application/pdf", "application/x-pdf") and this is working. So the problem is really with csv.

Any idea?

Hey be_tnt!

Nice just checking into this and dumping the UploadedFile object. When it comes to asking "What is the mime type of this file?" there are *two* places that information can come from. First, when the user submits the form, *their* browser sends information that says "this is text/csv". But, this can't be trusted... as a user could "spoof" this and send anything. So, second, what Symfony can do (and *does* do) is look at the uploaded file's contents and try to guess the mime type. I believe this what you're seeing: the user's browser is saying "Hey! This is text/csv", but then Symfony looks inside of the file and just sees "text/plain"... probably because CSV basically is a text/plain format (or very similar).

To solve this, I would just allow text/plain. If you really wanted to make sure that *only* CSV files (and not just random text files) were uploaded, you could add your own next layer of validation that tried to parse the file's contents as CSV and creates a validation if it fails (that would be a custom validator).

Let me know if this helps!

Cheers!

Thx for your answer. It helps a lot to understand the validation process. I will have to parse the csv file in my project so the latest validation step will be done there :)

Thx again!