File/asset upload trough the API

Support
1

Is there any way that I can upload a file trough the API? Is there a endpoint for this scope?

2

take a look here https://github.com/agentejo/cockpit/issues/763

3

Thank you! That’s useful. That being checked does anybody know how to send a file to the /api/collections/save/{collectionname} endpoint? I want to create an entry to a collection that contains a asset field. Can I send it as JSON to the endpoint or as form data? An example would be great.

Capture
Capture887×680 31.5 KB

4

That’s not possible. Maybe you could write some custom api endpoint, that checks for form data, than saves the asset and than adds the asset meta data to the entry and saves it.

You can split it in two requests. Send your asset. The meta data should be in the response. Than send your entry with the assets meta.

5

Hi again,
I still can’t make this work. I’m trying to upload an asset using PHP cURL. Everything goes well when i test the process in postman but not in PHP (even if I copy and paste the code from postman).

tempsnip
tempsnip796×628 27.5 KB

tempsnip2
tempsnip2709×316 12.9 KB

When I run the php code above I get no response from the API. If I specify the file name without ‘new CURLFILE()’ i get this response: {“uploaded”:[],“failed”:[],“assets”:[]}
I tried a lot of approaches in the past week but with no luck.
Do you have any idea what I’m doing wrong ?
Do you have a working PHP example for uploading an asset to addAssets endpoint?

Thank you all!

6

I think you don’t have to do it after you uploaded the file, it returns the whole path of the file. So, you’ll only have to add a new field like file_link to attach your new entry.

You are in the wrong HEADER format. As you’re sending file, you don’t have to add “Content-Type: application/json”

I also had the same issue before, actually it should be files[], instead of files[0].

This below example work 100%. Hope it helps you.

Upload via Javascript (AJAX)

HTML

<input type="file" name="myFile" id="myFile">
      <button class="upload">Upload</button><br>
<img class="preview-img">

Javascript


const API_URL = '';
const TOKEN   = '';

function uploadImage(){
  
            const PATH      = '/api/cockpit/addAssets?token=';
            const api       = API+PATH+TOKEN;
            const fileInput = document.querySelector('input[type="file"]');
            const formData  = new FormData();
  
            formData.append('files[]', fileInput.files[0]);
  
          
            fetch(url,{
                method : 'POST',
                body : formData
            })
            .then(e=>e.json())
            .then(res=>{
                const {assets} = res;
                if(!assets){
                    alert('Upload failed!');
                    return;
                }
              
               const image_url = API_URL+'/storage/uploads'+assets[0].path;
              
               document.querySelector(".preview-img").src= image_url;
              
               alert('Successfully uploaded!');

            })
}

document.querySelector(".upload").addEventListener('click',()=>{
   uploadImage()
})
Upload via PHP ( CURL )

PHP

<?php

function uploadImage($api,$token,$file){

    $path    = '/api/cockpit/addAssets?token=';
    $url     = $api.$path.$token;
    $cfile   = new CURLFile(realpath($file));
    $post    = ['files[]' => $cfile];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_HTTPHEADER,array('Content-Type: multipart/form-data'));
    curl_setopt($ch, CURLOPT_TIMEOUT, 10000);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post);

    $result  = curl_exec ($ch);

    return $result;
};

$API   = 'https://your_cockpit_api.com';
$TOKEN = '80b0e4625d1e7ff753f1d45967a92f';
$FILE  = 'file.txt';
$data  = uploadImage($API,$TOKEN,$FILE);
echo $data;