I am trying to build a frontend image upload component, in the Component Controller i can't seem to access the file?

i have tried <code> $file = Input::file('someUpload'); </code> with no joy :(

I tried also dumping the inputs <code>Log::info(var_export(Input::all(), true)); </code> and everything but the Upload shows up.

Anyone have any suggestions?

thanks

Last updated 3 years ago

Are you sure your form accepts file uploads? The form tag requires the attribute enctype="multipart/form-data" On top of that, you should post some code so other can provide more solid help.

I'm trying to figure out a way to do the same thing, and looks like it's not that easy to implement file upload on frontend. The fact is, we can't send files over (basic) AJAX (XMLHttpRequest), like we do with textual form data, so, I see 2 ways to resolve the issue: the first one: get rid of AJAX in your form processing. Go traditional way with custom form processing controller/path. http://octobercms.com/docs/database/model#file-attachments and http://laravel.com/docs/requests#files would help in this case. Second way: learn how avatar backend widget (/backend/formwidgets/FileUpload.php) works. As far as I see, it's using jquery file upload plugin.

Follow up: Make sure the form is not processed via AJAX, here's the correct form example http://octobercms.com/docs/cms/pages#handling-forms. In the form processing function inside your component use the code sample from http://octobercms.com/docs/database/model#file-attachments

Is that possible to use the nice file upload widget in a front end component ?

You could probably do something like: http://peterjolson.com/using-laravel-and-jquery-file-upload/ but use http://octobercms.com/docs/database/model#file-attachments instead of cabinet like in that tutorial.

This was also my problem.

https://github.com/octobercms/october/issues/741

I'm interested as well to use frontend file uploads similar as in backend is used

deroccha said:

I'm interested as well to use frontend file uploads similar as in backend is used

Hello! I created simple plugin for it http://octobercms.com/plugin/xeor-upload.

Hi, thanks I ended up to reuse the idea behind https://github.com/responsiv/uploader-plugin. That one has upload preview and lot of fancy things

deroccha said:

Hi, thanks I ended up to reuse the idea behind https://github.com/responsiv/uploader-plugin. That one has upload preview and lot of fancy things

It is strange that I did not find it when it was so I need :(

Hi, how can I use https://github.com/responsiv/uploader-plugin in my component ?

Fixed => Remove Ajax form and it's fine now

Last updated 9 years ago

Hi everyone,

I tryed implementing the responsiv/uploader but after the image has been uploaded, it throws en exception:

The code is:

function onStart()
{
    $this->imageUploader->bindModel('avatar', $this->user);
}

Note that I'm using this in a page that has the account component dropped inside so I can use $this->user to refference the current user.

Last updated 9 years ago

Solved!!!!

function onInit()
{
    $this->imageUploader->bindModel('avatar', $this->account->user());
}

In which account is the account component that I dragged into the page :)

Hope it helps

Hello all,

I'm able to get https://github.com/responsiv/uploader-plugin to work but how do i change where it uploads to?

Thanks

Last updated 9 years ago

i can upload files without october plugins or framework.js, see:

basic markup

{{ form_open({ files: true }) }}
   <input type="file" name="file" />
   <button type="submit" >Send to serve</button>
{{ form_close() }}

Adding event listener

init: function () 
{
   var
     form = document.querySelector('form');
     form.addEventListener('submit', function ( event ) 
    { 
       event.preventDefault();
       this.ajaxRequest( form );
    }.bind( this ) );
},

inside ajax request method

ajaxRequest: function ( form )
{
    var
        handler = 'onSubmit',
        formdata = new FormData( form ); // learn about this

    $.ajax({
       headers: 
       {
         'X-OCTOBER-REQUEST-HANDLER': handler, // important
       },
       type: 'post',
       cache: false,
       contentType: false, // important
       processData: false,  // important
       data: formdata, 
       success: function(data) 
       {
            // do something
       }
    });
}

and finally, in your ajax handler

function onSubmit()
{
  $path = \Config::get('filesystems.disks.local.root');
  $fileName = 'foo.jpg';
  \Request::file('file')->move($path, $fileName);
  return [
   'success' =>   true
 ];
}

works like a charm

Last updated 9 years ago

sulaz1x said:

Hi, how can I use https://github.com/responsiv/uploader-plugin in my component ?

Fixed => Remove Ajax form and it's fine now

Remove it from where? The instructions say to add a form with deferred binding only?

some sort of dirty hack

js

function submit() {
    var form = $('form');

    $.ajax({
        url: form.attr('action'),
        data: new FormData(form[0]),
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data){
            $.request('onDummy', {
                update: {'component::view': '#id'},
            });
        }
    });
}

html

{{ form_open({ request: 'component::onHandler', files: true }) }}
    ....
    <button type="button" onclick="submit()">Submit</button>
</form>

ajax handlers

public function onHandler()
{
    dd(\Input::file());
}
public function onDummy(){}

Last updated 9 years ago

So, there is still no method to upload files out of the box on frontend? I am trying to use it inside my component and it doesn't work.

Uploader plugin from Responsiv works very well for me, but it could be nice to have sorting in next release. So far I made it with small changes in plugins files and using jquery ui sortable:

uploader.js line 179-180 func onUploadSuccess add line: $preview.attr('id', 'file-id-'+response.id) To have id on a newrly created element.

To the trait or ImageUploader component add fnc:

public function onSaveImagesOrder(){
    $order = post('ord');
    //print_r($order);
    $orderArray = explode(',', $order);
    if (is_array($orderArray)){
        $n = 0;
        foreach ($orderArray as $item){
            $n ++;
            $imageId = str_replace('file-id-', '', $item);
            Db::table('system_files')
            ->where('id', $imageId)
            ->update(['sort_order' => $n]);
        }
    }
}

Maybe here not everything is perfect as I noticed cms saves order with larger numbers, but in case of one model record this should work. Also it might better to use system files model and edit it. who knows how?

Initialize sortable in some js file you add to component or page:

$(".upload-files-container").sortable({
    cursor: "move",
    appendTo: ".upload-object",
    update: function () {
        var order1 = $('.upload-files-container').sortable('toArray').toString();
        $.oc.stripeLoadIndicator.show();
        $.request('onSaveImagesOrder', {
            data: {ord: order1},
            success: function(data) {
                $.oc.stripeLoadIndicator.hide();
            }
        });
    }
 }).disableSelection();

Needs a small tuning, but should work )))

Last updated 8 years ago