richie1803
richie1803

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 $file = Input::file('someUpload'); with no joy :(

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

Anyone have any suggestions?

thanks

Last updated

alxy
alxy

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.

Sergey
Sergey

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.

Sergey
Sergey

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

tom.plessis238
tom.plessis238

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

that0n3guy
Shahiem
deroccha
deroccha

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

sozonov.alexey
sozonov.alexey

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.

deroccha
deroccha

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

sozonov.alexey
sozonov.alexey

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 :(

sulaz1x
sulaz1x

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

RomaldyMinaya
RomaldyMinaya

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

RomaldyMinaya
RomaldyMinaya

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

babdon7610
babdon7610

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

Alexandre Thebaldi
Alexandre Thebaldi

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

SpankyP
SpankyP

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?

sk
sk

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

ucan.not.advance13036
ucan.not.advance13036

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.

maxDubovsky
maxDubovsky

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

1-20 of 35