Log In Sign Up
Home›Docs›Form›Upload Component

Upload Component

Category: Form
The upload component supports batch uploading in multiple formats with direct cloud transmission, including Amazon S3, Cloud Storage, Azure Blob Storage, OSS, COS, Kodo, UPYUN and more.

Basic Usage

Use the oc-upload node to create a file upload field. The url attribute is required and specifies the server address where files will be sent.

  • Output
  • HTML
  • PHP
  •                 
                
            
  •                 
                //Test environment simulates cross-domain
                header("Access-Control-Allow-Origin: *");
                //Define upload directory (simulated)
                $path = "filesDirectory/";
                $path = "https://unpkg.com/orcares/image/"; 
                //Define allowed file types
                $extArr = array("jpg", "png", "gif", "txt", "doc", "docx", "pdf", "xsl", "xslx","mp3","mp4");
                //Define max file size (1MB)
                $maxSize = 1024 ** 3;
                //Get file extension
                function extend($file_name)
                {
                    $extend = pathinfo($file_name);
                    $extend = strtolower($extend["extension"]);
                    return $extend;
                }
                //Get 13-digit timestamp to match file's lastModified
                function getTimestamp() {
                    list($t1, $t2) = explode(' ', microtime());
                    return (float)sprintf('%.0f',(floatval($t1)+floatval($t2))*1000);
                }
                $timestamp = getTimestamp();
                //Output result
                function echoResult($flag,$msg='Upload error!',$time,$url='',$name='')
                {
                    $object = $flag?array('msg' => $msg, 'code' => 200, 'url' => $url, 'name' => $name,'time'=>$time):array('msg' => $msg, 'code' => 400,'time'=>$time);
                    $result = json_encode($object);
                    echo  $result;
                }
                if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
                    $file = $_FILES[array_shift(array_keys($_FILES))];
                    $name = $file['name'];
                    $size = $file['size'];
                    $tmp = $file['tmp_name'];
                    //Random filename
                    $ext = extend($name);
                    $image_name = time() . rand(100, 999) . "." . $ext;
                    //Server-side validation is necessary to prevent malicious uploads bypassing frontend validation
                    if (empty($name)) {
                        echoResult(false,'Please select a file!',$timestamp);
                        exit;
                    }
                    if (!in_array($ext, $extArr)) {
                        echoResult(false,'Invalid file format!',$timestamp);
                        exit;
                    }
                    if ($size > $maxSize) {
                        echoResult(false,'File size cannot exceed 1MB',$timestamp);
                        exit;
                    }
                    if(!file_exists($path)){
                        //If path is incorrect (simulated)
                        echoResult(true,'Simulated path upload success!',$timestamp,'https://unpkg.com/orcares/image/upload.jpg',$image_name);
                        exit;
                    }else{
                        //If all validations pass, upload file and return path {valid:true,message:'Upload success!',code:200,url:'files/xxx.jpg'}
                        if (move_uploaded_file($tmp, $path . $image_name)) {
                            //In real scenarios, path needs to be manually concatenated
                            $url = 'ajax/'.$path . $image_name;
                            echoResult(true,'Upload success!',$timestamp,$url,$image_name);
                            exit;
                        }  
                    }
                }

Single File Selection

By default, multiple file selection is enabled. Set multiple="false" to allow only single file selection.

  • Output
  • HTML
  •

File Quantity Limits

The limit attribute can set file quantity limits, where limit.min sets the minimum number of files and limit.max sets the maximum number of files. Both default to 0 (no limit).

  • Output
  • HTML
  •

Accepted File Types

The accept attribute sets allowed file types, functioning the same as the native file input's accept attribute with identical syntax.

  • Syntax 1 - Pure extensions: accept=".jpg,.mp4"
  • Syntax 2 - Pure MIME types: accept="image/*,video/mp4"
  • Syntax 3 - Mixed extensions and MIME: accept=".html,image/*,video/mp4"
  • Output
  • HTML
  •

Thumbnail List

By default, files are displayed in a minimalist list. To show more information like thumbnails and multi-line titles, use the type='bullet' attribute.

  • Output
  • HTML
  •

Grid List

Set type='cube' to use a grid list, which is ideal for image uploads.

  • Output
  • HTML
  •

Card List

Set type='card' to use a card list, which displays more text information based on the grid list.

  • Output
  • HTML
  •

Table

Set type='table' to display all file information in tabular form.

  • Output
  • HTML
  •

Special Structures

The feature attribute sets fixed-structure upload controls with two current options:

  • picture - Fixed cube-type list where selection, upload and delete buttons have same width as images and are aligned at the end
  • gallery - Any list type where the list and all buttons are wrapped in an outer frame

Defaults to empty (structure based on type attribute

  • Output
  • HTML
  •

The above demonstrates gallery structure with type=text, but gallery supports all types.

  • Output
  • HTML

  • type=bullet

    type=table

    type=cube

    type=card

  •

Size

Set size through the size attribute with options: sm, md (default), and lg. The size only applies to buttons.

  • Output
  • HTML
  •

Disabled State

Set disabled to disable the instance.

  • Output
  • HTML
  •

Attributes

This component encapsulates the built-in instance, and its attributes are consistent with the parameters of the built-in instance. You can click here to view all parameters.

Several important notes:

  1. All component attributes should be lowercase.
  2. Attribute values must be in string format.
  3. If an attribute value is an object, the surrounding { and } symbols can be omitted.
  4. For attribute names that are verb-object structures or composed of two words, use hyphens to separate them. For example:
    • Module parameter contType (if exists) should be written as cont-type in component attributes
    • Parameter b4Init should be written as b4-init in attributes
  5. All methods, events, and variables can be accessed through the built-in instance (typically via this.ins).
  6. When data cannot be passed through component attributes (e.g., due to nested single/double quote issues), you can manipulate the built-in instance to achieve your goal. It's particularly recommended to implement event listeners through the built-in instance.

Common Methods

Common component methods:

  • set: Set properties (takes key-value pairs or array)
  • reset: Reset properties (no params)
  • clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Common Events

Common component events:

  • connected: Component connected (no params)
  • disconnected: Component disconnected (no params)
  • adopted: Component moved (no params)
  • set: Property set (receives value)
  • cleared: Property cleared (no params)
  • reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})

Prev
Upload Library: Feature Details, Direct Cloud Upload, Events and Methods Demo Examples
1 month ago

New Launch: 20% Off All Products

Unlock all examples and development resources