File Upload Field in a Form

Hey Cool,

What do you mean about "the input file doesn't show"? What browser do you use? Could you provide a screenshot maybe? It would help to understand the problem

Cheers!

Thank you victor for your response,
Well, the input file that rendered by the FileType in ArticleFormType does not appear. Although, it perfectly works..
I use Symfony4.3 and Google chrome as defaut browser. I even tried it in FireFox browser and the same problem remains.
I'm looking forward to your response.
Thanks.
The link of the problem's screenshot : https://i.imgur.com/fqIdXJS...

Hey Cool,

Hm, that's weird, I just double-checked with downloaded course code and I do have file path and even a "Browse" button to choose a file - I don't see the button on your screenshot as well. What is your OS? Windows? I'd recommend you to check your browser version, probably there might be some updates and you just need to install and reload your browser first. Also, make sure you don't have any extensions (most probably some add blockers etc.) that might block or modify your page content. Also, try to open this page in Chrome Incognito mode where all plugins are turned off by default.

If you still does not see it - most probably you have some style issues, it would be good to double check styles and HTML markup, you can debug things in Chrome with Chrome developer toolbar. Btw, did you download the course code for this tutorial and start from the start/ directory? Or did you start a completely separate fresh project? If the second, please, try to download the course code and bootstrap the project from the final/ directory. Did you see the file path and button there?

Anyway, it sounds more like browser problem, especially if it works perfectly but you can't see the path - that's not something you can tweak with styles or HTML code, it just works out of the box in browsers. So I mostly lean toward that some browser extension modifies the page behind the scene :/

I hope this helps!

Cheers!

Hello victor, I did desactivate all the extensions, my browser is in his latest version and I do even open the app in Chrome Incognito mode, but the problem is still remaining.

My PC's OS is Windows 8.1.

In fact, i did not download this couse code, I've started the project from Zero, step by step, from the first chapiter "Stellar Development with Symfony 4" to the Forms chapiter and continue with this course.

when I debug with Chrome developer toolbar, it sounds that this fiels has a style of "opacity:0", but when I make the "opacity:1", it gives me the standard file input not the bootsraped one.

This is the first issue I faced, and it sounds weird.

This is my Github project's link: https://github.com/mohamedT...

Thanks a lot for your help and I'm looking forward to your response again :)

Hey Cool,

Ah, I see... this really sounds like your project is missing some styles, actually that "Browse" button is added with CSS styles. It's difficult to say what exactly you're missing, I'd recommend you to download our course code and compare your HTML structure with the one we have in this screencast. Also keep an eye on styles you're including. Except of possible missing HTML/CSS in your project I find it difficult to say what exactly may cause this problem.

I hope this helps!

Cheers!

Hello victor ,
Thanks a lot for your help, I fixed the problem, I've just updated the bootstrap stylesheet in base.html.twig to the latest version 4.4.1 and the issue is fixed, it is as simple as that. :D

Hey Cool,

Ah, cool! :) Glad you was able to fix it! And thank you for sharing your solution.

Cheers!

Hey Jose,

Hm, I don't see any reasons why it should fail on HTTPS fairly speaking. Please, double-check our logs, there might be a tip why it fails. Also, make sure you send your request to the HTTPS and server works by HTTPS, i.e. can load pages in HTTPS.

I hope this helps!

Cheers!

Hey Alessandro,

Hm, if you get null instead of UploadedFile - most probably your file wasn't sent to the server. Are you sure selected and attached the file in your form? Are you sure the form is sent via POST instead of GET method? How do you render the form? Try to use special Twig functions to render form data, like form()/form_start()/form_end() instead of rendering the form tag manually, you may miss some important details when you render manually.

Cheers!

Yes to all but the effective difference Is the upload, i'm trying to use Ajax and It works for all param but not for files. If i use the normal submit works(i've tryed in the morning). I Always render the form with twig tag, it's so more clean and Easy

Hey Alessandro V.!

Hmmm. So it sounds like it might be an issue with your Ajax call not sending the file directly. What JavaScript are you using to submit the form via Ajax? If you open your network tools in your browser and find the Ajax request... then scroll down to the bottom where it says "Request body", what does it look like? Do you see plain-text fields that look like firstName=Ryan@lastName=Weaver ? Or do you see it structured as "multipart/form-data" (you can also know by looking at the headers on the request: there should be a Content-Type header set to "multipart/form-data".

I think you did a good job debugging by testing it with a normal (non-Ajax) submit. This definitely makes me think that we should look at the Ajax JavaScript first :).

Cheers!

Hey, i've tested without the ajax and the form works. https://pastebin.com/CQNX7625 this is the js code that i'm using. it serialize the content of the form. Maybe it can't serialize files

Hey Alessandro V.!

Yup, that's correct :). If you want to upload a file, you need to use the FormData object. Here's an example - https://stackoverflow.com/q... - the code is a little fancy (they created separate Upload object, which is not necessary), but hopefully you can see how they used FormData to attach the file, then used jQuery to upload that FormData.

Cheers!

Hey JavierMendezK !

I've answered this question over on the other thread :) https://symfonycasts.com/sc...

Cheers!

sorry. I have just found. It in the entity but mine is setPicutre, not setImageFileName. That was the problem....

Hey @ujjpeet!

I'm glad you worked it out :).

Cheers!

Hey yacine,

I'm not sure if that's bug on the bundle but what you can do is to manually delete the cache folder (rm -rf var/cache) and try again, or remove all the files generated by the command and try again.

Cheers!

hello Diego

thanks for your reply, i just did delete the cache folder, then i launched make:crud, Then Article, and still getting the same error :/

[...]\vendor\composer/../../src/Form/Ar
ticle ?[39;49m
?[37;41m Type.php): failed to open stream: No such file or directory

for now i'm just dealing with the Article1Type with commenting it all, but thats not clean .

also, i already did try to remove all the files generated by the command, to be clear i'm deleting : ArticleController, the entire Article Folder in template, ArticleType.php (and Article1type), but the issue here is that somewhere in var\cache\dev\containerSOMEID -> getArticleControllerService.php there is a line that is callinig my controller class and this line is still here even when i did your rm -rf var\cache... i dont understand why :/ i already try to edit my ArticleController like this before and it worked perfectly..

Hey @yacine

Could you double check that all generated files were removed, and also, check for any code reference to any of the files, for example, any use statement of the entity.

basicaly what i need here is to delete the Article1Type.php that war previously generated to only keep the ArticleType.php that was here at first.

(since i posted as a guest i cannot update my previous message to remove the part with the name of my project, if someone could errase this part from my previous message that would be perfect ♥ )

It's a library for making a string URL compliant. For example, if your string has a slash / in it, it will replace by a -

Cheers!

Hey @Oliver!

Hmmm. It sounds possibly like the form fields might not be setup quite right for an embedded form - the images form field needs to be a collection of ImageFormType, not of FileType - I’m just guessing this is the issue.

Anyways, post some form code here and we’ll see if we can help :).

Cheers!

weaverryan

Hi Ryan,

sorry for the long timeout - I had to make some money ;-).

I've tryied to replace FileType::class by ImageFormType, but (of course?) this class does not exist. It seems as if I am still not on top of the mountain and further hints are welcome.
Thx

Hey Oliver W.!

> sorry for the long timeout - I had to make some money ;-).

I get that ;)

> I've tryied to replace FileType::class by ImageFormType, but (of course?) this class does not exist

Hmm. It should exist - I'm specifically talking about the FileType from Symfony - this one - https://symfony.com/doc/cur... - maybe check the use statement on that?

Cheers!

Hi Ryan,

it is still impossible to post an entire php-file. The systems cuts the leading lines!? Therefor find the files here: http://cloud.ad-libitum.inf...

Thx
Oliver

Hey Oliver W.!

It is possible, but it is not simple with the Disqus comments :/. Sorry about that!

Ok, thanks for posting the code! And I apologize for the confusion! I gave you (what I believe is) the correct advice initially, but it was not clear enough and then I actually got a bit confused in my replies. And also, now that I see the code, I can understand what you're doing a bit better!

To review, here is your setup:

1) On ArticleFormType, for the image field, you were originally setting this to a FileType from Symfony. Now that I see your setup, you SHOULD continue to do this again. You're setting this to mapped => false, which you must do for your setup, because you need to do extra processing before the data is ultimately set on Article.

2) Then, in ArticleAdminController, you are reading the UploadedFile objects off of the image field via $uploadedFiles = $request->files->getIterator('image'). That's technically fine... but really, you should be able to read them off of the form with $form['image']->getData() (btw, I would probably call this field "images" since it is many images.

3) Again in ArticleAdminController, you loop over $uploadedFiles, which is an array of UploadedFile objects. This is good! And you build a $bildnamen array where each item is eventually set onto $article->addImage($bild). Here is the problem. These $bild variables are still UploadedFile objects. At some point, you need to create new Image objects, set the filename on each, and set THAT onto $article->addImage().

Anyways, another solution to all of this would be to build a form class for your Image entity - ImageFormType - and embed that into the ArticleFormType.image field. This would cause more things to happen automatically for you... but honestly, you already have things 95% working and I find your solution quite readable and you have a lot of control. So would continue to use an unmapped field like you are and get the last details smoothed out so it's working. And also, if you eventually find that users are needing to uploading multiple images, using a JavaScript uploader will get you a bit nicer UI :).

Cheers!

I've got it now. I fixed it using $bildobject = new Images(), $bildobjekt->setFilename() and $bildobjekt->setArticle() on the images-table. Not using articles.
Thx again

Hi weaverryan

Thx for your answer and as you can see I am even falling when making one step after the other. So guess what will happen when I take two steps at a time ;-). I will look at the JS-solution later. I've seen that video.
For the rest I have to wait for some free time to test your hints. I'll return to you - for shure!!
Oliver

Hey Allan,

Have you watched this tutorial to the end? :) We're talking about multiple files uploading further in https://symfonycasts.com/sc... . Also, we explain why multiple files uploading has bad UI e.g. if one of selected files does not pass validation - none files are saved. So, if you have not watched this course to the end - I'd recommend you to do this first, and I bet you will get answers to your questions :)

I hope this helps!

Cheers!