Skip to main content

Components

Raccolta di componenti plug and play da utilizzare in piattaforma.

Dropzone con caricamento diretto su S3

È possibile inizializzare un dropzone semplicemente inserendo tutti i parametri di configurazione nel markup.

Campi Obbligatori

Nel contenitore del dropzone è necessario definire alcuni attributi per la corretta configurazione dell'upload. I nomi assegnati ai vari attributi sono solo d'esempio, vengono passati direttamente alla vostra action così come li definite.

  • data-action: rappresenta la action del form di upload, la destinazione dove mettere i media. Il formato deve essere del tipo: "https://s3-``<region>.amazonaws.com/<nome_bucket>
  • **data-sign**: l'azione registrata per eseguire correttamente la firma necessaria per l'upload. Usare come riferimento la appq-s3-pre-sign-upload. E' possibile inserire solo l'url admin-ajax.php, in questo secondo caso sarà obbligatorio inserire il data-action relativo al presign.
  • **data-nonce**: impostare un nonce adeguato da usare nell'action definita in data-sign.
  • **data-***: tutti gli altri attributi data verranno passati nella POST del presign per eventuali altri utilizzi (parametrizzare le sotto-cartelle del bucket, fare altre verifiche, ecc...)

Esempio di Markup

`"`
`data-cp = "<?= $campaign_id; ?>"`
`data-uc = "<?= $use_case_id; ?>"`
`data-nonce="<?= wp_create_nonce(sprintf('Direct_Upload_by_%s_for_%s_in_%s', $tester_id, $use_case_id , $campaign_id )); ?>"`
`data-bucket="<?= get_bucket_uri('eu-west-1', 'appq.use-case-media');?>">`
``

Gestione Eventi

Una volta completata la creazione del dropzone viene innescato l'evento **initComplete** ed è quindi possibile accedere alle proprietà del componente creato:

`$('selettore_dropzone')[0].dropzone`

Usando il precedente esempio:

`$('#direct_dropzone')[0].dropzone`

Note

  • E' possibile avere più dropzone nella stessa pagina.
  • E' necessaria per ogni dropzone la presenza dell'ID dell'elemento che dovrà generarlo
  • Per far sì che venga costruito un Dropzone di tipo "direct", bisogna dichiararlo con l'attributo data-toggle="appq_direct_upload"

Emotion Tracker Experiment