How to make an app - Andromo App Maker

Announcement

Collapse
No announcement yet.

AMS Uploader

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • AMS Uploader

    Here is a little demo of a uploader what works in AMS, this is AMS+Nginx/PHP(lua/html(css)/js) based using the IE element with IE 11 enabled

    The uploading script that accepts the file is super easy


    This is apart of another app so some parts of the code might look like they do nothing but they do they send or set options for later use.

    Click image for larger version

Name:	ice_screenshot_20160717-162317.png
Views:	1
Size:	5.4 KB
ID:	288406


    Video Demo
    www.youtube.com/watch?v=4orcFEqgwng


    AMS
    On Navigate
    PHP Code:
    Web.Stop("Web1")
    _Do false
    if e_URL ~= nil then
        
    if String.Find(e_URL"#success||"1true) ~= -1 then
            __FileFileName 
    DelimitedStringToTable(e_URL"||");
            
    __ClosedURL String.Replace(e_URL"__Tools/__Upload/#success||"..__FileFileName[2], "__Share/"..__FileFileName[2]);
            
    Label.SetText("Error_Text""Upload Completed");
            
    Web.SetEnabled("Web1"false);
            
    __ExitThis false;
            
    _Do false;
            
            if 
    _CloseBox then
                __ExitThis 
    true;
                
    _Do true;
            else
                
    __ExitThis false
                _Do 
    false;
            
    end
        end
        
    if String.Find(e_URL"#error||"1true) ~= -1 then
            __ShowErrors 
    DelimitedStringToTable(e_URL"||");
            
    __ErrorMSG "An unknown error as been commited";
            if 
    __ShowErrors[2] == "overmaxsize" then
                Label
    .SetText("Error_Text""File to big");
            
    end
            
    if __ShowErrors[2] == "nofile" then
                Label
    .SetText("Error_Text""No file detected");
            
    end        
            
    if __ShowErrors[2] == "unknown" then
                Label
    .SetText("Error_Text""Unknown Error");
            
    end        
            __ExitThis 
    false
            _Do 
    true;
        
    end
    end 
    On Loaded
    PHP Code:
    if _Do then
        Web
    .LoadURL("Web1""{URLROOT}__Tools/__Upload_1/");
        
    _Do false;
        if 
    __ExitThis then
            DialogEx
    .Close();
        
    end
    end 
    upload.php

    PHP Code:
    <?php
        
    if ($_FILES["file1"]["size"] >= 1073741824){
            echo 
    "#error||overmaxsize";
            exit();
        }
        if (!
    $_FILES["file1"]["tmp_name"]) {
            echo 
    "#error||nofile";
            exit();
        }
        if(
    move_uploaded_file($_FILES["file1"]["tmp_name"] , "../../__Share/".$_FILES["file1"]["name"])){
            echo 
    "#success||".$_FILES["file1"]["name"];
        } else {
            echo 
    "#error||unknown";
        }
    ?>
    Basic HTML template with JS

    PHP Code:
    <!DOCTYPE html>
    <
    html>
        <
    head>
            <
    link rel="stylesheet" href="css/style.css">
            <
    script>
                function 
    _(el){
                    return 
    document.getElementById(el);
                }
                function 
    uploadFile(){
                    
    _("progress-box").style.display "block";
                    var 
    file _("file1").files[0];
                    var 
    formdata = new FormData();
                    if (
    file.size >= 1073741824){
                        
    _("progress-bar").style.backgroundColor "#d60a1f";
                        
    window.location.href './#error||overmaxsize';
                    }else{
                        
    formdata.append("file1"file);
                        
    _("file1").style.display "none";
                        
    _("file2").style.display "none";                    
                        var 
    ajax = new XMLHttpRequest();
                        
    ajax.upload.addEventListener("progress"progressHandlerfalse);
                        
    ajax.addEventListener("load"completeHandlerfalse);
                        
    ajax.addEventListener("error"errorHandlerfalse);
                        
    ajax.addEventListener("abort"abortHandlerfalse);
                        
    ajax.open("POST""upload.php");
                        
    ajax.send(formdata);
                    }
                }
                function 
    progressHandler(event){
                    var 
    percent = (event.loaded event.total) * 100;
                    
    _("progress-bar").style.width Math.round(percent)+"%";
                }
                function 
    completeHandler(event){
                    
    _("progress-bar").style.backgroundColor "#2a922e";
                    
    window.location.href './'+event.target.responseText;
                }
                function 
    errorHandler(event){
                    
                }
                function 
    abortHandler(event){
                    
                }
            
    </script>
        </head>
        <body>
            <form id="upload_form" enctype="multipart/form-data" method="post">
                <div id="progress-box" class="progress" style="display:none;">
                    <div id="progress-bar" class="progress-bar" style="width:0%; background-color: rgb(121, 8, 140);"></div>
                </div>
                <input type="file" name="file1" id="file1" /><input id="file2" type="button" value="Upload File" onclick="uploadFile()" />
                <h3 id="status"></h3>
                <p id="loaded_n_total"></p>
            </form>
        </body>
    </html> 
    Last edited by kingzooly; 07-17-2016, 09:24 AM. Reason: Updating with image
    Plugins or Sources MokoX

  • #2
    I forgot the css file

    PHP Code:
    htmlbodydivspanappletobjectiframe,
    h1h2h3h4h5h6pblockquotepre,
    aabbracronymaddressbigcitecode,
    deldfnemimginskbdqssamp,
    smallstrikestrongsubsuptt, var,
    buicenter,
    dldtddolulli,
    fieldsetformlabellegend,
    tablecaptiontbodytfoottheadtrthtd,
    articleasidecanvasdetailsembed,
    figurefigcaptionfooterheaderhgroup,
    menunavoutputrubysectionsummary,
    timemarkaudiovideo {
      
    margin0;
      
    padding0;
      
    border0;
      
    font-size100%;
      
    fontinherit;
      
    vertical-alignbaseline;
    }

    articleasidedetailsfigcaptionfigure,
    footerheaderhgroupmenunavsection {
      
    displayblock;
    }

    body {
      
    line-height1;
    }

    olul {
      list-
    stylenone;
    }

    blockquote{
      
    quotesnone;
    }

    blockquote:beforeblockquote:after,
    q:beforeq:after {
      
    content'';
      
    contentnone;
    }

    table {
      
    border-collapsecollapse;
      
    border-spacing0;
    }

    .
    about {
      
    margin70px auto 40px;
      
    padding8px;
      
    width260px;
      
    font10px/18px 'Lucida Grande'Arialsans-serif;
      
    color#666;
      
    text-aligncenter;
      
    text-shadow0 1px rgba(2552552550.25);
      
    background#eee;
      
    backgroundrgba(2502502500.8);
      
    border-radius4px;
      
    background-image: -webkit-linear-gradient(toprgba(0000), rgba(0000.1));
      
    background-image: -moz-linear-gradient(toprgba(0000), rgba(0000.1));
      
    background-image: -o-linear-gradient(toprgba(0000), rgba(0000.1));
      
    background-imagelinear-gradient(to bottomrgba(0000), rgba(0000.1));
      -
    webkit-box-shadowinset 0 1px rgba(2552552550.3), inset 0 0 0 1px rgba(2552552550.1), 0 0 6px rgba(0000.2);
      
    box-shadowinset 0 1px rgba(2552552550.3), inset 0 0 0 1px rgba(2552552550.1), 0 0 6px rgba(0000.2);
    }
    .
    about a {
      
    color#333;
      
    text-decorationnone;
      
    border-radius2px;
      -
    webkit-transitionbackground 0.1s;
      -
    moz-transitionbackground 0.1s;
      -
    o-transitionbackground 0.1s;
      
    transitionbackground 0.1s;
    }
    .
    about a:hover {
      
    text-decorationnone;
      
    background#fafafa;
      
    backgroundrgba(2552552550.7);
    }

    .
    about-links {
      
    height30px;
    }
    .
    about-links {
      
    floatleft;
      
    width50%;
      
    line-height30px;
      
    font-size12px;
    }

    .
    about-author {
      
    margin-top5px;
    }
    .
    about-author {
      
    padding1px 3px;
      
    margin-1px;
    }

    body {
      
    font13px/20px 'Lucida Grande'TahomaVerdanasans-serif;
      
    color#404040;
     /*background: #2a2a2a url("../img/bg.png") 0 0 repeat;*/
    }

    .
    container {
      
    margin80px auto;
      
    width640px;
      
    text-aligncenter;
    }
    .
    container .progress {
      
    margin0 auto;
      
    width400px;
    }

    .
    progress {
      
    padding4px;
      
    backgroundrgba(0000.25);
      
    /*border-radius: 6px;*/
      
    -webkit-box-shadowinset 0 1px 2px rgba(0000.25), 0 1px rgba(2552552550.08);
      
    box-shadowinset 0 1px 2px rgba(0000.25), 0 1px rgba(2552552550.08);
    }

    .
    progress-bar {
      
    positionrelative;
      
    height16px;
      
    /*border-radius: 4px;*/
      
    -webkit-transition0.4s linear;
      -
    moz-transition0.4s linear;
      -
    o-transition0.4s linear;
      
    transition0.4s linear;
      -
    webkit-transition-propertywidthbackground-color;
      -
    moz-transition-propertywidthbackground-color;
      -
    o-transition-propertywidthbackground-color;
      
    transition-propertywidthbackground-color;
      -
    webkit-box-shadow0 0 1px 1px rgba(0000.25), inset 0 1px rgba(2552552550.1);
      
    box-shadow0 0 1px 1px rgba(0000.25), inset 0 1px rgba(2552552550.1);
    }
    .
    progress-bar:before, .progress-bar:after {
      
    content'';
      
    positionabsolute;
      
    top0;
      
    left0;
      
    right0;
    }
    .
    progress-bar:before {
      
    bottom0;
      
    backgroundurl("../img/stripes.png"0 0 repeat;
      
    border-radius4px 4px 0 0;
    }
    .
    progress-bar:after {
      
    z-index2;
      
    bottom45%;
      
    border-radius4px;
      
    background-image: -webkit-linear-gradient(toprgba(2552552550.3), rgba(2552552550.05));
      
    background-image: -moz-linear-gradient(toprgba(2552552550.3), rgba(2552552550.05));
      
    background-image: -o-linear-gradient(toprgba(2552552550.3), rgba(2552552550.05));
      
    background-imagelinear-gradient(to bottomrgba(2552552550.3), rgba(2552552550.05));
    }
    #five:checked ~ .progress > .progress-bar {
      
    width5%;
      
    background-color#f63a0f;
    }

    #twentyfive:checked ~ .progress > .progress-bar {
      
    width25%;
      
    background-color#f27011;
    }

    #fifty:checked ~ .progress > .progress-bar {
      
    width50%;
      
    background-color#f2b01e;
    }

    #seventyfive:checked ~ .progress > .progress-bar {
      
    width75%;
      
    background-color#f2d31b;
    }

    #onehundred:checked ~ .progress > .progress-bar {
      
    width100%;
      
    background-color#86e01e;
    }

    .
    radio {
      
    displaynone;
    }

    .
    label {
      
    displayinline-block;
      
    margin0 5px 20px;
      
    padding3px 8px;
      
    color#aaa;
      
    text-shadow0 1px black;
      
    border-radius3px;
      
    cursorpointer;
    }
    .
    radio:checked + .label {
      
    colorwhite;
      
    backgroundrgba(0000.25);

    Plugins or Sources MokoX

    Comment


    • #3
      That's so nice i luvd it!
      keep goin!

      Comment

      Working...
      X