Storing files from input file filed into temp var before going into the database

Question

I want to preview the file first before proceeding to upload it in the database, is it possible to preview the selected file from the input file filed? or I am thinking of storing it first into a temp var before proceeding to upload it in database.

is there anyone can help me? the files that I am going to upload are txt and xls files here are may current codes:

VIEW

<form  id="upload" name="upload" action="<?php echo base_url(); ?>index.php/welcome/upgen048" method="POST" class="form-horizontal" enctype="multipart/form-data" onsubmit="return verify_upload()" >

                    <div class="col-lg-4"></div>    
                    <input type="file" name="uploadData" id="uploadData" style=""/>

                    <br />

                    <div class="text-center">
                    <button type="file" id="submit" value="Submit" class="btn btn-success"><medium><i class="fa fa-upload fa-3x" ></i></br> UPLOAD </medium></button>

                        <!-- Button trigger modal -->
                            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" <medium><i class="fa fa-upload fa-3x" ></i></br> PREVIEW </medium>
                            </button>

                            <!-- Modal -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                              <div class="modal-dialog" role="document">
                                <div class="modal-content"><!-- modal container -->
                                  <div class="modal-header"><!-- header -->
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">Preview</h4>
                                  </div>
                                  <div class="modal-body"><!-- body -->


                                    PREVIEW IN TABLE HERE


                                  </div>
                                  <div class="modal-footer"> <!-- footer -->
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                                <!--    <button type="button" class="btn btn-primary">Save changes</button> -->
                                  </div>
                                </div>
                              </div>
                            </div>

                    <!-- MODALS -->

                    </div>
                </form>

Controller

function upgen048()
{

    $this->file_path = realpath(navi_ups.'/gen048');

    $config['upload_path'] = $this->file_path;
    $config['max_size'] = 0;
    $config['allowed_types'] = 'txt';
    //$config['overwrite'] = TRUE;

    $this->load->library('upload');
    $this->upload->initialize($config);
    $this->upload->set_allowed_types('*');

    if ( !$this->upload->do_upload('uploadData'))
        {   
                $data['error'] = $this->upload->display_errors();
                $data['main_content'] = 'gen048';
                $this->load->view('includes/template',$data);
        }
    else { //else, set the success message
                $data = array('msg' => "Upload success!");
                $data['main_content'] = 'gen048';
                $this->load->view('includes/template',$data);
                $data['upload_data'] = $this->upload->data();

    }

Model

function srch_gen048()

{
    $sql =" select * from gen_048";
    $query = $this->db->query($sql);
    return($query->num_rows() > 0) ? $query->result(): NULL;
}

Answer 1

A procedure would be to add a table for pending files. The upload will insert the details into the pending table. Edit/Update the file stuff in the pending table. When you're done a submit button will insert the row from the pending table into gen_048 & delete the row in the pending table.

I'd suggest to add a mysql event to clear out any entries in the pending table which exceed a time limit, incase someone doesn't publish the pending file and doesn't discard it either.

Answer 2

Previewing the selected form file can be done with Javascript before it event gets sent to the server using the FileReader object on supporting browsers: Preview an image before it is uploaded

The answer above is for an Image file, but you could use something like window.open() to preview the file on a new tab/window instead of assigning it to an image tag.