Home / attachment / Upload user-submitted files from the frontend
  • How to Upload user-submitted files from the frontend

    upload-user-submitted-files-frontend

    There are many use cases for allowing users to upload files from the frontend, but the trick is making sure the file is uploaded and saved in the WordPress media library correctly. You can easily use standard PHP functions to handle the upload and then store the file wherever you like, but then you won’t be able to take advantage of the attachment system that WordPress uses. An image that is uploaded correctly, for example, will have all the various sizes available as well as the meta data, such as title, description and caption. You will also be able to edit all of this from the media library in your WordPress dashboard.

    This snippet will handle the upload for you and save the file in your media library correctly. All you need to do is pass the uploaded file array to the function - all uploaded files are stored in the $_FILES array so you just need to loop through that and upload each file from there. Remember that if you want your form to be able to handle file uploads then you need to add the enctype="multipart/form-data" attribute to the <form> tag.

    ( click code to copy )

    wordpress snippet : PHP

    <>
    function upload_user_file( $file = array() ) {
    	require_once( ABSPATH . 'wp-admin/includes/admin.php' );
          $file_return = wp_handle_upload( $file, array('test_form' => false ) );
          if( isset( $file_return['error'] ) || isset( $file_return['upload_error_handler'] ) ) {
              return false;
          } else {
              $filename = $file_return['file'];
              $attachment = array(
                  'post_mime_type' => $file_return['type'],
                  'post_title' => preg_replace( '/\.[^.]+$/', '', basename( $filename ) ),
                  'post_content' => '',
                  'post_status' => 'inherit',
                  'guid' => $file_return['url']
              );
              $attachment_id = wp_insert_attachment( $attachment, $file_return['url'] );
              require_once(ABSPATH . 'wp-admin/includes/image.php');
              $attachment_data = wp_generate_attachment_metadata( $attachment_id, $filename );
              wp_update_attachment_metadata( $attachment_id, $attachment_data );
              if( 0 < intval( $attachment_id ) ) {
              	return $attachment_id;
              }
          }
          return false;
    }
    
    ( click code to copy )

    wordpress snippet : PHP

    <>
    if( ! empty( $_FILES ) ) {
      foreach( $_FILES as $file ) {
        if( is_array( $file ) ) {
          $attachment_id = upload_user_file( $file );
        }
      }
    }
    
  • kachan64

    Cool, is there a code that you can preview the file?

    • I’m sure anything could be done, but it does not have a preview of the file.