upload file in public/uploads [Symfony 6.3]

[elliotlgn]

Hello ! I'd like to upload files into Project/public/uploads I took your "file-upload-example.md". but I don't understand what UserUploadStorage is,

Here is my form field:

->add('QUESTIONTEXT', TinymceType::class,[
                'label' => 'tet: ',
                'required' => true,
                "attr" => [
                    "skin"=> "oxide",
                    "content_css"=> "default",
                    'plugins' => 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table emoticons template image',
                    'toolbar' => 'searchreplace | fullscreen | undo redo | styleselect | fontsizeselect | bold italic underline forecolor backcolor | link media image anchor code | codesample | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
                    "images_upload_url"=> "/file/manager",
                    "images_upload_route"=> ""
                    "images_upload_route_params"=> "",
                    "images_upload_handler"=> "",
                    "images_upload_base_path"=> "",
                ],
            ])

Thanks a lot

[EmilePerron]

Hi Elliot,

The $userUploadStorage in our file upload example is just a class that handles file uploads to a storage server.

In your case, if you want to store the file on the same server, you could replace the following:

$userUploadStorage->upload($file->getContent());

with a simple $file->move(...) or file_put_contents(...) to save the file to your target location (e.g. public/uploads/).

If you haven't yet, you can look at Symfony's file upload documentation to help understand how to handle that.

Hope that helps! :)

[elliotlgn]

Thanks for your reply! But I changed my mind, what I actually want is:

When I open the image link plugin, I want it to open directly in my var/www/Projet/public/uploads, when I select an image, it's not uploaded to a folder, it just appears like this: <img src="public/uploads/mypicture.jpg" alt="" width="312" height="176"> so I can then insert it into the DB via form submission. Don't know if it's possible.

[EmilePerron]

Hi there!

This is more complex, and is not available out of the box in TinyMCE (as far as I know), as this requires more server-side code. You would likely have to use a file browser plugin (see TinyMCE's docs on self-hosted file management, which suggests using MoxieManager).

You could probably develop your own file manager as well, but that is way more complicated and I don't suggest you go down this road unless you know what you're getting into and have lots of time to spare.

Hope that helps!

[elliotlgn]

I found this

` tinymce.init({ selector: 'textarea', plugins: 'image code', toolbar: 'undo redo | link image | code',

  image_title: true,

  automatic_uploads: true,
  picker_types: 'image',

  file_picker_callback: function (cb, value, meta) {
  var input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');

input.onchange = function () {
  var file = this.files[0];

  var reader = new FileReader();
  reader.onload = function () {

    var id = 'blobid' + (new Date()).getTime();
    var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
    var base64 = reader.result.split(',')[1];
    var blobInfo = blobCache.create(id, file, base64);
    blobCache.add(blobInfo);

    cb(blobInfo.blobUri(), { title: file.name });
  };
  reader.readAsDataURL(file);
};

input.click();

}, content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' });`

This works perfectly, but there's a problem: this code creates a blob, but I don't want a blob to be created, I just want the path. For example, if we load an image from /images/test/picture.png, it will be transformed like this blob:https://project/78126513-4714-8e15-7c23-a3cc210c8dc9. If you have an idea, that'd be cool !