Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#
HTML Filedialog Set file extensions at runtime with accept jpg in javascript

 

In html you can define a file selection for an upload by setting the attribute: accept to file extensions in an input field

 

input_Files.attributes["accept"].value = ".jpg,.png,.tiff,.jpeg,.bmp,.gif"

 

File dialog Photos:

HTML Web File dialog for images, photos:

".jpg,.png,.tiff,.jpeg,.bmp,.gif oder image/*

 

Or file dialog for uploading videos with mp4 and video/*

 

 

Javascript Code:

Upload different file formats in one file dialog

The following Javascript code creates a

 

function editor_open_FileDialog_Images() {

    //------< editor_open_FileDialog_Images() >------

    editor_Remove_all_ImageResize_Divs();

    editor_open_FileDialog("Images", ".jpg,.png,.tiff,.jpeg,.bmp,.gif");; //or image/*"

    //------</ editor_open_FileDialog_Images() >------

}

function editor_open_FileDialog_Videos() {

    //------< editor_open_FileDialog_Videos() >------

    editor_open_FileDialog("Videos", ".mp4");; //video/*"

    //------</ editor_open_FileDialog_Videos() >------

}

function editor_open_FileDialog_Files() {

    //------< editor_open_FileDialog_Videos() >------

    editor_open_FileDialog("Files", ".zip,.pdf,.doc?,.dot?,.xls?,.xlt?,.ppt?,.css,.txt,.csv,.cs,.json,.ts,.html,.js,.map,.ico,.user,.cshtml,*.accdb,.  flp");; //*"

    //------</ editor_open_FileDialog_Videos() >------

}

 

function editor_open_FileDialog(sFileType,sExtensions) {

    //------< editor_open_FileDialog() >------

    //editor_Remove_all_ImageResize_Divs();

 

    varUpload_Files_Type = sFileType;

    var input_Files = document.getElementById("files_input_field");

    input_Files.attributes["accept"].value = sExtensions;  //".jpg";

    input_Files.click();    //*do not debug at this point, debug at this code-point in browser does not work

    //------</ editor_open_FileDialog() >------

}

 

 

where form field of type Html Input must be present

        @*----< Upload_Images_Dialog >----*@

 

    <form method="post" enctype="multipart/form-data">

        <input type="file" id="files_input_field" name="files" accept="" multiple style="visibility:hidden; height:0px;width:0px;" onchange="upload_Files_onChanged();" />

        @*image/**@

    </form>

        @*----</ Upload_Images_Dialog >----*@

 

 

HTML Frontend Code

@*-------< Right_Toolbar >-------*@

    <div id="divRight_Toolbar" class="divToolbarArticleEdit">

        @*--------< divInteract >--------*@

        <div id="divToolbarFloatArticle" class="divToolbarFloatArticle">

 

            <a title="View" class="fab_Button" onclick="save_to_View();">

                <span class="fab_Icon"></span>

            </a>

            <hr style="margin:40px;;" />

            <a title="Insert Images" class="fab_Button fab_Button_edit" onclick="editor_open_FileDialog_Images();">

                <span class="fab_Icon">+📸</span>

            </a>

            <a title="Insert Videos" class="fab_Button fab_Button_edit" onclick="editor_open_FileDialog_Videos();">

                <span class="fab_Icon">+🎞</span>

            </a>

            <a title="Upload and Insert Any files" class="fab_Button fab_Button_edit" onclick="editor_open_FileDialog_Files();">

                <span class="fab_Icon">+📎</span>

            </a>

            <a title="Delete" class="fab_Button fab_Button_red" onclick="Delete_Record();">

                <span class="fab_Icon">🗑</span>

            </a>

 

            <progress id="ctlProgress" value="0" max="100" style=" visibility:hidden;display:inline-block;width:100%;height:30px;position:fixed;bottom:0px;left:0px"></progress>

            <br />

 

 

        </div>

        @*--------</ DivInteract >--------*@

    </div>

    @*-------</ Right_Toolbar >-------*@

 

 

CSS style for the buttons

 

.fab_Button {

    display: inline-flex;

    padding: 20px;

    height: 70px;

    width: 70px;

    justify-content: center;

    margin-bottom: 4px;

    background-color: limegreen;

    font-size: x-large;

    border-radius: 40px;

    box-shadow: 4px 4px 8px darkgrey;

}

 

.fab_Button_edit {

    background-color: dodgerblue;   

}

.fab_Button_red {

    background-color: indianred;

}

.fab_Button:hover {

    background-color: lawngreen;   

}

.fab_icon {

}

 

.divToolbarArticle{

    width:40px;

    flex-direction:column;

   

}

 

Mobile

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de