# ExtJS File Upload

**URL:** <https://forum.shopware.com/t/extjs-file-upload/18824>\
**Category:** Shopware 3.5\
**Tags:** programming\
**Created:** [3. März 2014 um 19:38 UTC](https://forum.shopware.com/t/extjs-file-upload/18824 "2014-03-03T19:38:11Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![rtrau](https://avatars.discourse-cdn.com/v4/letter/r/cab0a1/32.png) [@rtrau](https://forum.shopware.com/u/rtrau)\
**Post date:** [3. März 2014 um 19:38 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/1 "2014-03-03T19:38:11Z")

</div>

Ich möchte gerne in ein selbst erstelltes Plugin Formular einen File Upload integrieren. Das entsprechende Upload Feld (xtype: ‘filefield’) wird auch angezeigt - allerdings bleibt das $\_FILE Array beim Absenden immer leer und es werden nur die POST Parameter des Formulars übermittelt. Wäre für Hinweise u. Lösungsvorschläge dankbar.

---

<div class="post-metadata">

**Author:** ![shredding](https://avatars.discourse-cdn.com/v4/letter/s/8797f3/32.png) [@shredding](https://forum.shopware.com/u/shredding)\
**Post date:** [3. März 2014 um 22:10 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/2 "2014-03-03T22:10:49Z")

</div>

Wenn du den fehlerhaften Code nicht postest, kann man dir leider auch nicht weiterhelfen …

---

<div class="post-metadata">

**Author:** ![rtrau](https://avatars.discourse-cdn.com/v4/letter/r/cab0a1/32.png) [@rtrau](https://forum.shopware.com/u/rtrau)\
**Post date:** [4. März 2014 um 08:32 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/3 "2014-03-04T08:32:41Z")

</div>

hier mal mein aktueller Code Model: ` Ext.define('Shopware.apps.RtrauTest.model.Test', { extend: 'Shopware.data.Model', configure: function () { return { controller: 'RtrauTest', detail: 'Shopware.apps.RtrauTest.view.detail.Test' }; }, fields: [{ name: 'id', type: 'int', useNull: true }, { name: 'active', type: 'boolean' }, { name: 'fileupload', type: 'string' }, { name: 'sort', type: 'int' },], }); ` Controller (main.js) ` Ext.define('Shopware.apps.RtrauTest.controller.Main', { extend: 'Enlight.app.Controller', init: function () { var me = this; me.mainWindow = me.getView('list.Window').create({ }).show(); me.callParent(arguments); } }); ` Detail View ` Ext.define('Shopware.apps.RtrauTest.view.detail.Test', { extend: 'Shopware.model.Container', padding: 20, initComponent: function() { var me = this; me.callParent(arguments); }, configure: function () { return { controller: 'RtrauTest', fieldSets: [{ title: 'TestDetails', fileUpload: true, layout: 'fit', fields: { active: {}, fileupload: { xtype: 'filefield', emptyText: 'Upload', buttonText: 'Upload', name: 'test', fieldLabel: 'File', allowBlank: false, buttonConfig: { cls: 'small secondary' } }, sort: { fieldLabel: 'Sortiernummer' }, } }] }; } }); ` Hat hier jemand eine Idee warum das File nicht übermittelt wird bzw. das $\_FILES Array nicht befüllt ist? Danke schonmal im Voraus!

---

<div class="post-metadata">

**Author:** ![designverign](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@designverign](https://forum.shopware.com/u/designverign)\
**Post date:** [5. März 2014 um 12:22 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/4 "2014-03-05T12:22:55Z")

</div>

Hört sich für mich so an, als wäre enctype=„multipart/form-data“ im Formular nicht gesetzt.

---

<div class="post-metadata">

**Author:** ![rtrau](https://avatars.discourse-cdn.com/v4/letter/r/cab0a1/32.png) [@rtrau](https://forum.shopware.com/u/rtrau)\
**Post date:** [6. März 2014 um 09:15 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/5 "2014-03-06T09:15:52Z")

</div>

Ja das dürfte der Grund sein. Im Anfrage Header wird der falsche Content Type gesendet: Content-Type application/json Die Frage ist nur wie kann ich das konfigurieren??? fileUpload: true ist bereits gesetzt u. explizit den enctype angeben hat auch nicht funktioniert.

---

<div class="post-metadata">

**Author:** ![rtrau](https://avatars.discourse-cdn.com/v4/letter/r/cab0a1/32.png) [@rtrau](https://forum.shopware.com/u/rtrau)\
**Post date:** [7. März 2014 um 08:09 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/6 "2014-03-07T08:09:21Z")

</div>

Niemand eine Idee??

---

<div class="post-metadata">

**Author:** ![rtrau](https://avatars.discourse-cdn.com/v4/letter/r/cab0a1/32.png) [@rtrau](https://forum.shopware.com/u/rtrau)\
**Post date:** [20. März 2014 um 11:15 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/7 "2014-03-20T11:15:11Z")

</div>

Da ich noch immer keine Lösung für dieses Problem gefunden habe möchte ich das Thema abermals aufwärmen. Gibt es hier niemanden der im Shopware.model.Container ein fileupload Field eingebaut hat bzw. ist das überhaupt möglich?

---

<div class="post-metadata">

**Author:** ![bono](https://avatars.discourse-cdn.com/v4/letter/b/ee7513/32.png) [@bono](https://forum.shopware.com/u/bono)\
**Post date:** [3. April 2014 um 23:29 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/8 "2014-04-03T23:29:38Z")

</div>

Gibt es hier inzwischen eine Lösung? Ich stehe vor dem selben Problem ☹

---

<div class="post-metadata">

**Author:** ![rtrau](https://avatars.discourse-cdn.com/v4/letter/r/cab0a1/32.png) [@rtrau](https://forum.shopware.com/u/rtrau)\
**Post date:** [4. April 2014 um 09:44 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/9 "2014-04-04T09:44:27Z")

</div>

Ich hab leider noch keine Lösung gefunden u. es vorerst über die Media Selection umgesetzt (xtype : 'mediafield). Vielleicht fällt ja noch wem etwas ein dazu?

---

<div class="post-metadata">

**Author:** ![bono](https://avatars.discourse-cdn.com/v4/letter/b/ee7513/32.png) [@bono](https://forum.shopware.com/u/bono)\
**Post date:** [4. April 2014 um 11:32 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/10 "2014-04-04T11:32:51Z")

</div>

Danke für die Info. Damit kann ich auch gut Leben. Den xtype:‚mediaField‘ kannte ich noch nicht. Wie kann ich hier noch eingrenzen, dass ich z.B. nur eine bestimmte Gruppe angezeigt bekomme? Also z.B. nur die Bilder unter der Gruppe Artikel?

---

<div class="post-metadata">

**Author:** ![bono](https://avatars.discourse-cdn.com/v4/letter/b/ee7513/32.png) [@bono](https://forum.shopware.com/u/bono)\
**Post date:** [4. April 2014 um 13:17 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/11 "2014-04-04T13:17:14Z")

</div>

Hallo, ich bin auch gerade mit diesem mediafield am verzweifeln. Wie hast du das zum laufen bekommen? Welche typen muss ich dafür in der Datenbank anlegen? bzw wie in den Models konfigurieren?

---

<div class="post-metadata">

**Author:** ![benjaminulmer](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@benjaminulmer](https://forum.shopware.com/u/benjaminulmer)\
**Post date:** [13. Juni 2014 um 15:18 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/12 "2014-06-13T15:18:22Z")

</div>

Hallo liebe Shopware Community, ich entwickle gerade ein Backend Plugin und habe ebenfalls ein Problem beim Fileupload mittel der ExtJS Komponente fileuploadfield. Wenn ich die Request POST Daten im Firebug analysiere finde ich folgendes: ` Content-Type: multipart/form-data; boundary=---------------------------2082051351907 Content-Length: 347 -----------------------------2082051351907 Content-Disposition: form-data; name="decorcolors-inputEl"; filename="testfile.csv" Content-Type: application/csv ` Die Daten werden also als Content-Type: multibyte/form-data übertragen, hier sollte das Problem also nicht liegen. Vielleicht kann mir ja jemand noch die ein oder andere Fehlerquelle, die beim Arbeiten mit ExtJS gerne gemacht wird, noch sagen. Danke

---

<div class="post-metadata">

**Author:** ![EikeBrandtWarneke](https://avatars.discourse-cdn.com/v4/letter/e/cdc98d/32.png) [@EikeBrandtWarneke](https://forum.shopware.com/u/EikeBrandtWarneke)\
**Post date:** [13. Juni 2014 um 15:24 UTC](https://forum.shopware.com/t/extjs-file-upload/18824/13 "2014-06-13T15:24:49Z")

</div>

Ich verwende folgenden code ohne Probleme: ExtJS: ` // getImportForm: function() { // var me = this; // me.importType = Ext.create( "Ext.form.field.ComboBox", { name: "importType", valueField: "key", displayField: "name", mode: "local", emptyText: "Daten wählen...", fieldLabel: "Daten", allowBlank: false, triggerAction: "all", editable: true, anchor: '100%', labelWidth: 150, store: Ext.create( "Ext.data.Store", { fields: ["key", "name"], data: [{ key: "categories", name: "Kategorien" }, { key: "snippets", name: "Textbausteine" }, { key: "propertiesGroups", name: "Artikel Eigenschaften Gruppen" }, { key: "propertiesValues", name: "Artikel Eigenschaften Werte" },] } ), } ); // me.importFile = Ext.create( "Ext.form.field.File", { emptyText: "Datei wählen...", buttonText: "Wählen", name: 'importFile', fieldLabel: 'Datei', allowBlank: false, anchor: '100%', labelWidth: 150 } ); // var toolbar = Ext.create( "Ext.toolbar.Toolbar", { dock: 'bottom', cls: 'shopware-toolbar', items: ["-\>", { text: "Start", cls: 'primary', formBind: true, handler: function () { // get the form var form = this.up( "form" ).getForm(); // valid form? if ( !form.isValid() ) // nope return; // let smarty parse the url var url = "{url module='backend' controller='AtsdTranslations' action='import' }"; // and submit the form form.submit( { url: url, waitMsg: "Bitte warten...", success: function ( fp, o ) { Ext.Msg.alert( "Import erfolgreich", o.result.message ); }, failure: function ( fp, o ) { Ext.Msg.alert( "Import abgebrochen", o.result.message ); } } ); } }] } ); // return a form panel return Ext.create( "Ext.form.Panel", { title: "Import", bodyPadding: 5, layout: "anchor", dockedItems: toolbar, items: [me.importType, me.importFile] } ); } ` Backend controller: ` /\*\* \* ... \* \* @return void \*/ public function importAction() { // disable json renderer $this-\>Front()-\>Plugins()-\>Json()-\>setRenderer( false ); // if ( $\_FILES['importFile']['error'] !== UPLOAD\_ERR\_OK ) { // echo json\_encode( array( 'success' =\> false, 'message' =\> "Could not upload file", )); // done return; } // und so weiter } ` Viele Grüße
