Other Combining Upload Forms

HTML · Oct 1, 2016

I would like to combine the waveformgenerator into my song upload form, so that the file input for the waveform is the same as the song upload input. I then want the generated image to be uploaded to /images/waves/ on my server, with the generated song filename ID. The sad part is I don't really know where the filename is generated and stuff (ex: 55352_3235_532.mp3), but it does generate that. I'm really bad at working with things like this, so I would really, really appreciate if someone could give me some help!

waveformgenerator.html

Code:

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="description" content="Adnan Ahmed">

    <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">

    <link rel="stylesheet" type="text/css" media="screen" href="http://idnan.github.io/SoundCloud-Waveform-Generator/css/style.css">
    <title>Adnan Ahmed - SoundCloud Waveform Generator</title>
  </head>

  <body>

    <!-- HEADER -->
    <div id="header_wrap" class="outer">
        <header class="inner">
          <a target="_blank" id="forkme_banner" href="https://github.com/Idnan/SoundCloud-Waveform-Generator">View on GitHub</a>

          <h1 id="project_title">SoundCloud Waveform Generator</h1>
          <h2 id="project_tagline"></h2>
        </header>
    </div>

    <!-- MAIN CONTENT -->
    <div id="main_content_wrap" class="outer">
          <section id="main_content" class="inner">
            <main>
                <p>The waveform like soundcloud will be generated once the file is selected.<br><i class='warn'>Only tested with MP3 and WAV so far.</i></p>
                <input type="file"><br><br><audio controls autoplay></audio>
                <form class="settings" enctype="application/json">
                  <h3>Settings</h3>
                  <div class="fieldset">
                        <label for="waveform-width">Waveform width:</label>
                        <input type="range" id="waveform-width" min="100" max="1000" value="450" step="50">
                        <span class="value">450</span>
                  </div>
                  <div class="fieldset">
                        <label for="bar-width">Waveform height:</label>
                        <input type="range" id="waveform-height" min="10" max="100" value="65" step="5">
                        <span class="value">65</span>
                  </div>
                  <div class="fieldset">
                        <label for="bar-width">Bar width:</label>
                        <input type="range" id="bar-width" min="1" max="8" value="3" step="1">
                        <span class="value">3</span>
                  </div>
                  <div class="fieldset">
                        <label for="bar-gap">Bar gap</label>
                        <input type="range" id="bar-gap" min="0" max="0.7" step="0.1" value="0.2">
                        <span class="value">0.2</span>
                  </div>
                  <div class="fieldset">
                        <label for="bar-color">Bar color:</label>
                        <input type="color" id="bar-color" value="#666666">
                  </div>
                  <div class="fieldset">
                        <label for="download">Download</label>
                        <input type="checkbox" id="download">
                  </div>   
                  <div class="fieldset">
                        <button type="submit">Remake waveform</button>
                  </div>
                </form>
                <img id="showcase" alt="Waveform Destination" style="background:black;">
            </main>
          </section>
    </div>

    <script type="text/javascript" src="http://idnan.github.io/SoundCloud-Waveform-Generator/js/jquery.js"></script>
    <script type="text/javascript" src="http://idnan.github.io/SoundCloud-Waveform-Generator/js/soundcloud-waveform.js"></script>

    <!-- Google analytics -->
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-56161851-2', 'auto');
        ga('send', 'pageview');
    </script>
    <script>
          // You are about to see some extremely horrible code that can be MUCH MUCH improved,
          // I've knowlingly done it that way, please don't judge me based upon this ;)
          $(document).ready(function () {     
      
            var showcase = document.querySelector('#showcase');
            window.curFile = null;

            document.querySelector('input[type="file"]').addEventListener('change', function(e) {
               showcase.src = '';
               document.querySelector('audio').src = URL.createObjectURL(e.target.files[0]);
               window.curFile = e.target.files[0];
               generateWaveform();
            }, false);

            function updateRange(e) {
             e.target.querySelector('#' + e.target.id + ' ~ .value').innerHTML = e.target.value;
            }

            function generateWaveform(e) {
                if (e) {
                  e.preventDefault();
                }
                var waveform_width = '717';
                var waveform_height = '37';
                var bar_width = '3';
                var bar_gap = '0.3';
                var bar_color = '#ff4c00'; 
                var download = document.querySelector('#download').checked; 
                if (document.querySelector('audio').src === '' || window.curFile === null) {
                  alert('No audio');
                  return;
                }
                showcase.setAttribute('alt', 'Loading waveform...');
                SoundCloudWaveform.generate(window.curFile, {
                        canvas_width: waveform_width,
                        canvas_height: waveform_height,
                        bar_width: bar_width,
                        bar_gap : bar_gap,
                        wave_color: bar_color,
                        download: download,
                        onComplete: function(png, pixels) {
                          document.querySelector('#showcase').src = png;
                      }
                    }
                );
            }

            // Range change
            var ranges = document.querySelectorAll('input[type="range"]');
            for (var i = 0; i < ranges.length; i++) {
                var range = ranges[i];
                range.addEventListener('change', updateRange, false);
            }
            document.querySelector('form').addEventListener('submit', generateWaveform, false);
          });
    </script>
  </body>
</html>

track_upload.html

Code:

<div class="page-container">
    <div class="page-header">{$page_title} {$url_title} <small id="track-selected-notice" style="text-align:right;float:right;font-family:Interstate;color:#71C43F;"></small></div>
    <div id="upload-message">{$message}</div>
    <form action="{$form_url}" enctype="multipart/form-data" method="post" id="track-upload" onsubmit="{$onclick}">
        {$token_input}
        <div class="track-info-container">
            <div class="edit-menu">
                <div class="edit-menu-item edit-menu-item-active" id="edit-general">{$lng->general_link}</div>
                <div class="edit-menu-item" id="edit-metadata">{$lng->metadata}</div>
                <div class="edit-menu-item" id="edit-permissions">{$lng->permissions}</div>
            </div>
            <div class="track-info-art">
                <div><img src="{$url}/thumb.php?src={$art}&t=m&w=200&h=200"></div>
                <div class="button-normal upload-btn" id="upload-art-btn">
                    <span id="cover-art" class="upload-btn-text">{$lng->upload_image}</span>
                    <span id="cover-art-sel" class="upload-btn-text" style="display: none;">{$lng->image_selected}</span>
                    <input type="file" name="art[]" id="upload-art" accept="image/*">
                </div>
                <div class="button-normal upload-btn" id="upload-track-btn" style="display: {$display}">
                    <span id="track-file" class="upload-btn-text">{$lng->upload_track}</span>
                    <span id="track-file-sel" class="upload-btn-text" style="display: none;">{$lng->track_selected}</span>
                    <input type="file" name="track[]" id="upload-track" accept="audio/*" multiple>
                </div>
            </div>
            <div class="edit-general">
                <div class="track-info-inputs">
                    <div class="track-info-input">
                        <div class="track-info-title">{$lng->admin_ttl_title} <span class="required">*</span></div>
                        <input type="text" name="title[]" id="track-title" value="{$title}">
                    </div>
                    <div class="track-info-input">
                        <div class="track-info-title">{$lng->ttl_description}</div>
                        <textarea name="description">{$description}</textarea>
                    </div>
                    <div class="track-info-input">
                        <div class="track-info-title">{$lng->tags} <span class="required">*</span></div>
                        <input type="text" name="tag" value="{$tag}" placeholder="{$lng->edit_tags}">
                    </div>
                </div>
            </div>
            <div class="edit-metadata" style="display: none">
                <div class="track-info-inputs">
                    <div class="track-info-input">
                        <div class="track-info-title">{$lng->buy_link}</div>
                        <input type="text" name="buy" value="{$buy}">
                    </div>
                    <div class="track-info-input">
                        <div class="track-info-title">{$lng->record_label}</div>
                        <input type="text" name="record" value="{$record}">
                    </div>
                    <div class="track-info-input">
                        <div class="track-info-title">{$lng->release_date}</div>
                        <select name="day">
                            {$days}
                        </select>
                        <select name="month">
                            {$months}
                        </select>
                        <select name="year">
                            {$years}
                        </select>
                    </div>
                    <div class="track-info-input">
                        <div class="track-info-title">{$lng->license}</div>
                        <div class="track-info-radio"><input type="radio" name="license" value="0" id="selection-ar" {$ar}> <label for="selection-ar">{$lng->all_rights}</label></div>
                        <div class="track-info-radio"><input type="radio" name="license" value="1" id="selection-cc" {$cc}> <label for="selection-cc">{$lng->creative_commons}</label></div>
                        <input type="hidden" name="license-nc" id="input-nc" value="{$nc}">
                        <input type="hidden" name="license-nd-sa" id="input-nd-sa" value="{$nd_sa}">
                        <br>
                        <div id="license-container" class="license-container">
                            <div>
                                <div class="license-box-container column">
                                    <div class="license-box-content license-box-active" id="license-at">
                                        <div class="license-box-title">{$lng->license_at}</div>
                                    </div>
                                </div>
                                <div class="license-box-container column">
                                    <div class="license-box-content" id="license-nc">
                                        <div class="license-box-title">{$lng->license_nc}</div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="license-box-container column">
                                    <div class="license-box-content" id="license-nd">
                                        <div class="license-box-title">{$lng->license_nd}</div>
                                    </div>
                                </div>
                                <div class="license-box-container column">
                                    <div class="license-box-content" id="license-sa">
                                        <div class="license-box-title">{$lng->license_sa}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="license-box-desc license-at">{$lng->license_at_desc}</div>
                            <div class="license-box-desc license-nc">{$lng->license_nc_desc}</div>
                            <div class="license-box-desc license-nd">{$lng->license_nd_desc}</div>
                            <div class="license-box-desc license-sa">{$lng->license_sa_desc}</div>
                            <br>
                            <a href="http://creativecommons.org/about/license/" target="_blank" title="{$lng->creative_commons}" rel="nofollow">
                                <div class="license-icon license-cc-icon"></div>
                                <div class="license-icon license-at-icon"></div>
                                <div class="license-icon license-nc-icon"></div>
                                <div class="license-icon license-nd-icon"></div>
                                <div class="license-icon license-sa-icon"></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="edit-permissions" style="display: none">
                <div class="track-info-inputs">
                    <div class="track-info-input">
                        <div class="track-info-title">{$lng->visibility}</div>
                        <select name="public">
                            <option value="0"{$poff}>{$lng->opt_private}</option>
                            <option value="1"{$pon}>{$lng->opt_public}</option>
                        </select>
                    </div>
                    <div class="track-info-input">
                        <div class="track-info-title">{$lng->allow_downloads}</div>
                        <select name="download">
                            <option value="0"{$doff}>{$lng->off}</option>
                            <option value="1"{$don}>{$lng->on}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="divider"></div>
        <div id="extra-files"></div>
        <div class="track-info-container">
            <div class="track-info-inputs" style="float:right;">
                <input type="submit" name="save" value="{$btntext}" id="upload-button">
                <div id="upload-pb" style="display: none;"><div id="upload-text" class="upload-text">{$lng->uploading} <span id="upload-pvt"></span>%</div><div id="upload-processing" class="upload-text" style="display: none;">{$lng->processing}</div><div class="upload-status-bar"><div class="upload-status-bar-percentage" id="upload-pbv"></div></div></div>
            </div>
        </div>
    </form>
</div>

post_track.php

Code:

<?php
include("../includes/config.php");
session_start();
if($_POST['token_id'] != $_SESSION['token_id']) {
    return false;
}
include("../includes/classes.php");
require_once(getLanguage(null, (!empty($_GET['lang']) ? $_GET['lang'] : $_COOKIE['lang']), 2));
$db = new mysqli($CONF['host'], $CONF['user'], $CONF['pass'], $CONF['name']);
if ($db->connect_errno) {
    echo "Failed to connect to MySQL: (" . $db->connect_errno . ") " . $db->connect_error;
}
$db->set_charset("utf8");

$resultSettings = $db->query(getSettings());
$settings = $resultSettings->fetch_assoc();

// The theme complete url
$CONF['theme_url'] = $CONF['theme_path'].'/'.$settings['theme'];

// If message is not empty
if(!empty($_POST)) {
    if($_POST['error']) {
        if($_POST['desc']) {
            $err[] = array(6, 5000);
        }
        if($_POST['buy']) {
            $err[] = array(7);
        }
        if($_POST['tag_max']) {
            $err[] = array(8, 30);
        }
        if($_POST['tag_min']) {
            $err[] = array(9, 1);
        }
        if($_POST['ttl_min']) {
            $err[] = array(10);
        }
        if($_POST['ttl_max']) {
            $err[] = array(11, 100);
        }
      
        foreach($err as $error) {
            $message .= notificationBox('error', sprintf($LNG["{$error[0]}_upload_err"], ((isset($error[1])) ? $error[1] : ''), ((isset($error[2])) ? $error[2] : '')));
        }
      
        $update = array($message);
    } else {
        // If the user have session or cookie set
        if(isset($_SESSION['username']) && isset($_SESSION['password']) || isset($_COOKIE['username']) && isset($_COOKIE['password'])) {
            $loggedIn = new loggedIn();
            $loggedIn->db = $db;
            $loggedIn->url = $CONF['url'];
            $loggedIn->username = (isset($_SESSION['username'])) ? $_SESSION['username'] : $_COOKIE['username'];
            $loggedIn->password = (isset($_SESSION['password'])) ? $_SESSION['password'] : $_COOKIE['password'];
          
            $verify = $loggedIn->verify();
          
            // If user is authed successfully
            if($verify['username']) {
                $feed = new feed();
                $feed->db = $db;
                $feed->url = $CONF['url'];
                $feed->user = $verify;
                $feed->id = $verify['idu'];
                $feed->username = $verify['username'];
                $feed->per_page = $settings['perpage'];
                $feed->art_size = $settings['artsize'];
                $feed->art_format = $settings['artformat'];
                $feed->paypalapp = $settings['paypalapp'];
                $feed->track_size_total = ($feed->getProStatus($feed->id, 1) ? $settings['protracktotal'] : $settings['tracksizetotal']);
                $feed->track_size = ($feed->getProStatus($feed->id, 1) ? $settings['protracksize'] : $settings['tracksize']);
                $feed->track_format = $settings['trackformat'];
                $feed->time = $settings['time'];
              
                $update = $feed->updateTrack($_POST, 1);
            }
        }
    }
}
echo json_encode(array("result" => (strpos($update[0], 'notification-box-error') > 0 ? 0 : 1), "message" => $update[0]));
mysqli_close($db);
?>

HTML · Apr 24, 2017

Still need this haha

insaneadmin · Apr 24, 2017

My guess would be the renaming and copy from temp to the final destination is in the: include("../includes/classes.php"); file

I'm not sure what script this is, but a lot will allow you to override the defaults set, to allow for some personalisation by the user. Here's a popular upload script that may give you an idea of where to look.

https://www.verot.net/php_class_upload.htm

That's about the best I can offer as I am awful when it comes to coding.

HTML · May 1, 2017

insaneadmin said:
My guess would be the renaming and copy from temp to the final destination is in the: include("../includes/classes.php"); file

I'm not sure what script this is, but a lot will allow you to override the defaults set, to allow for some personalisation by the user. Here's a popular upload script that may give you an idea of where to look.

https://www.verot.net/php_class_upload.htm

That's about the best I can offer as I am awful when it comes to coding.

Thanks. I'm using a custom music sharing platform, similar to Soundcloud. I found the naming system in includes/classes.php which creates a random numerical format

$tName = mt_rand().'_'.mt_rand().'_'.mt_rand().'.'.$this->db->real_escape_string($ext);

This is so confusing :/

The generated waveform image creates a data URI, it basically needs to save / move to the waveform directory using the same random generated numerical name.

Code:

        // Validate the files to be uploaded
        if(empty($error)) {
            $tpath = __DIR__ .'/../uploads/tracks/';
            $mpath = __DIR__ .'/../uploads/media/';

            if($type) {
                if(isset($_FILES['track']['name'])) {
                    // Get the total uploaded size
                    $query = $this->db->query(sprintf("SELECT (SELECT SUM(`size`) FROM `tracks` WHERE `uid` = '%s') as upload_size", $this->db->real_escape_string($this->id)));
                    $result = $query->fetch_assoc();

                    $ext = pathinfo($_FILES['track']['name'][$num], PATHINFO_EXTENSION);
                    $size = $_FILES['track']['size'][$num];
                    $fullname = $_FILES['track']['name'][$num];
                    $allowedExt = explode(',', $this->track_format);
                    $maxsize = $this->track_size;

                    // Validate the total upload size allowed
                    if(($result['upload_size'] + $size) > $this->track_size_total) {
                        $error[] = array(0, saniscape($values['title']));
                    }

                    // Get file type validation
                    $track = validateFile($_FILES['track']['tmp_name'][$num], $_FILES['track']['name'][$num], $allowedExt, 1);

                    if($track['valid'] && $size < $maxsize && $size > 0) {
                        $t_tmp_name = $_FILES['track']['tmp_name'][$num];
                        $name = pathinfo($_FILES['track']['name'][$num], PATHINFO_FILENAME);
                        $size = $_FILES['track']['size'][$num];
                        $tName = mt_rand().'_'.mt_rand().'_'.mt_rand().'.'.$this->db->real_escape_string($ext);

                        // Send the track name in array format to the function
                        $values['name'] = $tName;
                        $values['size'] = $size;

                        $t_upload = true;
                    } elseif($_FILES['track']['name'][$num] == '') {
                        // If the file size is higher than allowed or 0
                        $error[] = array(1);
                    }
                    if(!empty($ext) && ($size > $maxsize || $size == 0)) {
                        // If the file size is higher than allowed or 0
                        $error[] = array(2, saniscape($values['title']), fsize($maxsize));
                    }
                    if(!empty($ext) && !$track['valid']) {
                        // If the file format is not allowed
                        $error[] = array(3, saniscape($values['title']), implode(', ', $allowedExt));
                    }
                }
            }

            if(empty($GLOBALS['multiart'])) {
                if(isset($_FILES['art']['name'])) {
                    foreach($_FILES['art']['error'] as $key => $err) {
                        $ext = pathinfo($_FILES['art']['name'][$key], PATHINFO_EXTENSION);
                        $size = $_FILES['art']['size'][$key];
                        $allowedExt = explode(',', $this->art_format);
                        $maxsize = $this->art_size;

                        // Get file type validation
                        $image = validateFile($_FILES['art']['tmp_name'][$key], $_FILES['art']['name'][$key], $allowedExt, 0);

                        if($image['valid'] && $size < $maxsize && $size > 0 && !empty($image['width']) && !empty($image['height'])) {
                            $m_tmp_name = $_FILES['art']['tmp_name'][$key];
                            $name = pathinfo($_FILES['art']['name'][$key], PATHINFO_FILENAME);
                            $fullname = $_FILES['art']['name'][$key];
                            $size = $_FILES['art']['size'][$key];

                            // If there's no error during the track's upload
                            if(empty($error)) {
                                // Generate the file name & store it into a super global to check when multi upload
                                $mName = $GLOBALS['multiart'] = mt_rand().'_'.mt_rand().'_'.mt_rand().'.'.$this->db->real_escape_string($ext);
                            }

                            // Delete the old image when editing the track
                            if(!$type) {
                                $query = $this->db->query(sprintf("SELECT `art` FROM `tracks` WHERE `id` = '%s'", $this->db->real_escape_string($_GET['id'])));
                                $result = $query->fetch_assoc();
                                deleteImages(array($result['art']), 2);
                            }

                            // Send the image name in array format to the function
                            $values['art'] = $mName;

                            $m_upload = true;
                        } elseif($_FILES['art']['name'][$key] == '') {
                            // If no file is selected
                            if($type) {
                                $values['art'] = 'default.png';
                            } else {
                                // If the cover artwork is not selected, unset the image so that it doesn't update the current one
                                unset($values['art']);
                            }
                        }
                        if(!empty($ext) && ($size > $maxsize || $size == 0)) {
                            // If the file size is higher than allowed or 0
                            $error[] = array(4, fsize($maxsize));
                        }
                        if(!empty($ext) && !$image['valid']) {
                            // If the file format is not allowed
                            $error[] = array(5, implode(', ', $allowedExt));
                        }
                    }
                }
            } else {
                // Generate a new file name
                $ext = pathinfo($GLOBALS['multiart'], PATHINFO_EXTENSION);
                $finalName = mt_rand().'_'.mt_rand().'_'.mt_rand().'.'.$this->db->real_escape_string($ext);
                // Copy the previous track image
                copy($mpath.$GLOBALS['multiart'], $mpath.$finalName);
                // Store the new file name
                $values['art'] = $finalName;
            }
        }

        if(!empty($error)) {
            return array(0, $error);
        } else {
            if($t_upload) {
                // Move the file into the uploaded folder
                move_uploaded_file($t_tmp_name, $tpath.$tName);
            }
            if($m_upload) {
                // Move the file into the uploaded folder
                move_uploaded_file($m_tmp_name, $mpath.$mName);
            }
            return array(1, $values);
        }
    }

HTML · Jan 19, 2020

Solved!

Other Combining Upload Forms

HTML

Big Board Coder

HTML

Big Board Coder

insaneadmin

Enthusiast

HTML

Big Board Coder

HTML

Big Board Coder